@pheem49/mint 1.8.1 → 1.9.0

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

@@ -12,9 +12,10 @@ import {
   selectWorkspaceDirectory,
   saveInteractionAgentActivity,
   streamChatMessage,
+  cancelChatMessage,
   submitToolApproval,
   listen,
-  readClipboardImage as readTauriClipboardImage,
+  readClipboardImage,
   type AgentProgress,
   type ChatResponse,
   type ChatSession,
@@ -22,6 +23,7 @@ import {
   type PictureEntry,
   type RuntimeStatus,
 } from '../tauri'
+
 import ChatPanel from './ChatPanel'
 import DashboardSidebar, { type DashboardView } from './DashboardSidebar'
 import ImageStudioPanel from './ImageStudioPanel'
@@ -30,6 +32,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 +97,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')
@@ -267,6 +140,7 @@ export default function MintDashboard() {
   const [conversationId, setConversationId] = useState(activeConversationId)
   const [chatSessions, setChatSessions] = useState<ChatSession[]>([])
   const chatEnd = useRef<HTMLDivElement | null>(null)
+  const lastNativePasteTimeRef = useRef(0)
   const startupReady = (dashboardDataReady && modelReady) || startupTimedOut
   const [proactiveSuggestion, setProactiveSuggestion] = useState<any>(null)
 
@@ -522,6 +396,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: {
@@ -690,7 +578,28 @@ export default function MintDashboard() {
       }
     }
 
-    if (!file) return false
+    if (!file) {
+      // Fallback for Tauri desktop app where WebKitGTK/WebView clipboard paste events do not provide file handles
+      const now = Date.now()
+      if (now - lastNativePasteTimeRef.current > 100) {
+        lastNativePasteTimeRef.current = now
+        readClipboardImage().then((dataUri) => {
+          if (dataUri) {
+            const name = 'Pasted image'
+            createTrimmedImagePreview(dataUri)
+              .catch(() => dataUri)
+              .then((previewDataUri) => {
+                setImageAttachments((current) => [...current, { dataUri, previewDataUri, name }])
+              })
+          }
+        }).catch((err) => {
+          console.warn('Failed to read clipboard image via Tauri API:', err)
+        })
+      }
+      return false
+    }
+
+
 
     readImage(file)
       .then((dataUri) => {
@@ -705,37 +614,7 @@ 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]
@@ -882,6 +761,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)
@@ -899,7 +783,14 @@ 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 ''
+      }
     }
   }
 
@@ -941,6 +832,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)
@@ -1110,7 +1007,6 @@ export default function MintDashboard() {
             onSelectImage={selectImage}
             onSelectDocument={selectDocument}
             onPasteImage={pasteImage}
-            onReadClipboardImage={readClipboardImage}
             onSetMessage={setMessage}
             onSendVoiceMessage={sendVoiceMessage}
             onRemoveImage={(idx: number) => {
@@ -1126,6 +1022,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>
   )