@pheem49/mint 1.8.0 → 1.8.2

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

@@ -11,9 +11,9 @@ import {
   listSavedPictures,
   saveInteractionAgentActivity,
   streamChatMessage,
+  cancelChatMessage,
   submitToolApproval,
   listen,
-  readClipboardImage as readTauriClipboardImage,
   type AgentProgress,
   type ChatResponse,
   type ChatSession,
@@ -25,6 +25,13 @@ import ChatPanel from './ChatPanel'
 import DashboardSidebar, { type DashboardView } from './DashboardSidebar'
 import PicturesLibrary from './PicturesLibrary'
 import ImageStudioPanel from './ImageStudioPanel'
+import {
+  errorMessage,
+  readImage,
+  readDocument,
+  createTrimmedImagePreview,
+  applyThemeStyles,
+} from '../../shared/utils/ui'
 
 const DEFAULT_CONFIG = {
   theme: 'dark',
@@ -66,142 +73,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')
@@ -384,6 +255,10 @@ export default function MintDashboard() {
   }
 
   const toggleSidebar = () => {
+    if (window.innerWidth <= 760) {
+      setMobileSidebarOpen(false)
+      return
+    }
     const next = !sidebarCollapsed
     window.localStorage.setItem('mint:sidebar-collapsed', String(next))
     setSidebarCollapsed(next)
@@ -400,10 +275,10 @@ export default function MintDashboard() {
     setAgentMode(enabled)
   }
 
-  async function handleApproval(approved: boolean, _autoApproveSession = false) {
+  async function handleApproval(approved: boolean, _autoApproveSession = false, answer?: string) {
     if (!pendingApproval) return
     try {
-      await submitToolApproval(pendingApproval.token, approved)
+      await submitToolApproval(pendingApproval.token, approved, answer)
     } catch (reason) {
       setError(errorMessage(reason))
     } finally {
@@ -411,6 +286,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: {
@@ -583,37 +472,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]
@@ -825,7 +683,7 @@ export default function MintDashboard() {
 
   return (
     <div className={`app-container ${startupReady ? '' : 'is-loading'}`}>
-      <div className={`app-body ${sidebarCollapsed ? 'sidebar-collapsed' : ''} ${view === 'pictures' ? 'pictures-open' : ''} ${mobileSidebarOpen ? 'mobile-sidebar-open' : ''}`}>
+      <div className={`app-body ${(sidebarCollapsed && window.innerWidth > 760) ? 'sidebar-collapsed' : ''} ${view === 'pictures' ? 'pictures-open' : ''} ${mobileSidebarOpen ? 'mobile-sidebar-open' : ''}`}>
         {mobileSidebarOpen && (
           <div
             className="sidebar-backdrop"
@@ -882,7 +740,6 @@ export default function MintDashboard() {
             onSelectImage={selectImage}
             onSelectDocument={selectDocument}
             onPasteImage={pasteImage}
-            onReadClipboardImage={readClipboardImage}
             onSetMessage={setMessage}
             onSendVoiceMessage={sendVoiceMessage}
             onRemoveImage={(idx: number) => {
@@ -897,6 +754,7 @@ export default function MintDashboard() {
             settingsConfig={settingsConfig}
             onSetModel={changeModel}
             onApproval={handleApproval}
+            onCancelMessage={handleCancelMessage}
             onToggleMobileSidebar={() => setMobileSidebarOpen(!mobileSidebarOpen)}
           />
         </main>
@@ -908,6 +766,7 @@ export default function MintDashboard() {
             setView('chat')
             setMessage(imgPrompt)
           }}
+          onToggleMobileSidebar={() => setMobileSidebarOpen(!mobileSidebarOpen)}
         />
       </div>
       <div className={`startup-loading ${startupReady ? 'is-hidden' : ''}`} aria-live="polite" aria-busy={!startupReady}>

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

@@ -2,10 +2,6 @@ import { useEffect, useMemo, useState } from 'react'
 import { type PictureEntry, convertFileSrc } from '../tauri'
 import type { DashboardView } from './DashboardSidebar'
 
-const INITIAL_VISIBLE_PICTURES = 18
-const PICTURE_RENDER_BATCH_SIZE = 18
-const PICTURE_RENDER_BATCH_DELAY_MS = 80
-
 interface PicturesLibraryProps {
   view: DashboardView
   pictures: PictureEntry[]
@@ -14,31 +10,16 @@ interface PicturesLibraryProps {
 }
 
 export default function PicturesLibrary({ view, pictures, onSetView, onRefreshPictures }: PicturesLibraryProps) {
-  const [visibleCount, setVisibleCount] = useState(INITIAL_VISIBLE_PICTURES)
+  const [visibleCount, setVisibleCount] = useState(24)
   const visiblePictures = useMemo(
     () => pictures.slice(0, visibleCount),
     [pictures, visibleCount],
   )
 
   useEffect(() => {
-    if (view !== 'pictures') {
-      setVisibleCount(INITIAL_VISIBLE_PICTURES)
-      return
-    }
-
-    setVisibleCount(INITIAL_VISIBLE_PICTURES)
+    setVisibleCount(24)
   }, [view, pictures])
 
-  useEffect(() => {
-    if (view !== 'pictures' || visibleCount >= pictures.length) return
-
-    const timer = window.setTimeout(() => {
-      setVisibleCount((current) => Math.min(current + PICTURE_RENDER_BATCH_SIZE, pictures.length))
-    }, PICTURE_RENDER_BATCH_DELAY_MS)
-
-    return () => window.clearTimeout(timer)
-  }, [view, pictures.length, visibleCount])
-
   return (
     <section className={`pictures-library ${view === 'pictures' ? 'is-visible' : ''}`} aria-hidden={view !== 'pictures'}>
       <header className="pictures-header">
@@ -61,14 +42,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">
-          {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>
+        <>
+          <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>
   )