@pheem49/mint 1.8.1 → 1.9.0

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')
@@ -415,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: {
@@ -587,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]
@@ -752,6 +606,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)
@@ -769,7 +628,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 ''
+      }
     }
   }
 
@@ -811,6 +677,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)
@@ -886,7 +758,6 @@ export default function MintDashboard() {
             onSelectImage={selectImage}
             onSelectDocument={selectDocument}
             onPasteImage={pasteImage}
-            onReadClipboardImage={readClipboardImage}
             onSetMessage={setMessage}
             onSendVoiceMessage={sendVoiceMessage}
             onRemoveImage={(idx: number) => {
@@ -901,6 +772,7 @@ export default function MintDashboard() {
             settingsConfig={settingsConfig}
             onSetModel={changeModel}
             onApproval={handleApproval}
+            onCancelMessage={handleCancelMessage}
             onToggleMobileSidebar={() => setMobileSidebarOpen(!mobileSidebarOpen)}
           />
         </main>

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>
   )