@pheem49/mint 1.14.0 → 1.15.0

package/src/renderer/shared/components/UiFeatureCard.tsx

@@ -0,0 +1,267 @@
+import React from 'react'
+import { resolveMediaUrl } from '../utils/markdown'
+import {
+  MessageSquare,
+  Mail,
+  Smartphone,
+  Video,
+  Database,
+  Code,
+  Terminal,
+  File,
+  FileText,
+  Folder,
+  Cpu,
+  Zap,
+  Sparkles,
+  Check,
+  AlertCircle,
+  Layers,
+  Palette,
+  Globe,
+  Box,
+  Package,
+  Crop,
+  Shield,
+  Cloud,
+  Settings,
+  Download,
+  Upload,
+  Image,
+  Play,
+  Music,
+  HardDrive,
+  Sliders,
+  ExternalLink,
+  Lock,
+  CreditCard,
+  UserCheck,
+  User,
+  Repeat,
+  AlertTriangle,
+  Key,
+  Clock,
+  type LucideIcon,
+} from 'lucide-react'
+
+const ICON_MAP: Record<string, LucideIcon> = {
+  'message-square': MessageSquare,
+  chat: MessageSquare,
+  mail: Mail,
+  email: Mail,
+  smartphone: Smartphone,
+  phone: Smartphone,
+  mobile: Smartphone,
+  video: Video,
+  camera: Video,
+  database: Database,
+  db: Database,
+  code: Code,
+  terminal: Terminal,
+  file: File,
+  'file-text': FileText,
+  folder: Folder,
+  cpu: Cpu,
+  zap: Zap,
+  fast: Zap,
+  sparkles: Sparkles,
+  check: Check,
+  'alert-circle': AlertCircle,
+  'alert-triangle': AlertTriangle,
+  warning: AlertTriangle,
+  lock: Lock,
+  security: Shield,
+  shield: Shield,
+  key: Key,
+  'credit-card': CreditCard,
+  payment: CreditCard,
+  user: User,
+  'user-check': UserCheck,
+  repeat: Repeat,
+  sync: Repeat,
+  clock: Clock,
+  time: Clock,
+  layers: Layers,
+  palette: Palette,
+  globe: Globe,
+  web: Globe,
+  box: Box,
+  package: Package,
+  crop: Crop,
+  scan: Crop,
+  cloud: Cloud,
+  settings: Settings,
+  download: Download,
+  upload: Upload,
+  image: Image,
+  play: Play,
+  music: Music,
+  'hard-drive': HardDrive,
+  storage: HardDrive,
+  sliders: Sliders,
+  filter: Sliders,
+}
+
+function resolveIcon(name?: string): LucideIcon {
+  if (!name) return Sparkles
+  const clean = name.toLowerCase().trim().replace(/_/g, '-')
+  return ICON_MAP[clean] || Sparkles
+}
+
+export interface UiFeatureItem {
+  title: string
+  subtitle?: string
+  badge?: string
+  badgeColor?: 'green' | 'blue' | 'purple' | 'amber' | 'red'
+  thumbnail?: string
+  icon?: string
+  details?: Record<string, string> | Array<{ label: string; value: string }>
+  tags?: string[]
+  link?: string
+}
+
+export interface UiFeatureData {
+  title?: string
+  subtitle?: string
+  items?: UiFeatureItem[]
+}
+
+const BADGE_THEMES: Record<string, { bg: string; color: string; border: string }> = {
+  green: { bg: 'rgba(16, 185, 129, 0.15)', color: '#34d399', border: 'rgba(16, 185, 129, 0.3)' },
+  blue: { bg: 'rgba(56, 189, 248, 0.15)', color: '#38bdf8', border: 'rgba(56, 189, 248, 0.3)' },
+  purple: { bg: 'rgba(168, 85, 247, 0.15)', color: '#c084fc', border: 'rgba(168, 85, 247, 0.3)' },
+  amber: { bg: 'rgba(245, 158, 11, 0.15)', color: '#fbbf24', border: 'rgba(245, 158, 11, 0.3)' },
+  red: { bg: 'rgba(239, 68, 68, 0.15)', color: '#f87171', border: 'rgba(239, 68, 68, 0.3)' },
+}
+
+export default function UiFeatureCard({ data }: { data: UiFeatureData | UiFeatureItem[] | UiFeatureItem }) {
+  let title: string | undefined
+  let subtitle: string | undefined
+  let items: UiFeatureItem[] = []
+
+  if (Array.isArray(data)) {
+    items = data
+  } else if (data && typeof data === 'object') {
+    if ('title' in data && Array.isArray((data as UiFeatureData).items)) {
+      title = (data as UiFeatureData).title
+      subtitle = (data as UiFeatureData).subtitle
+      items = (data as UiFeatureData).items || []
+    } else if ('title' in data) {
+      items = [data as UiFeatureItem]
+    }
+  }
+
+  if (items.length === 0) return null
+
+  return (
+    <div className="chat-ui-feature-container">
+      {(title || subtitle) && (
+        <div className="chat-ui-feature-header">
+          {title && <h4 className="chat-ui-feature-header-title">{title}</h4>}
+          {subtitle && <p className="chat-ui-feature-header-subtitle">{subtitle}</p>}
+        </div>
+      )}
+
+      {items.map((item, idx) => {
+        const badgeTheme = BADGE_THEMES[item.badgeColor || 'green'] || BADGE_THEMES.green
+        const IconComp = resolveIcon(item.icon)
+        const resolvedThumb = item.thumbnail ? resolveMediaUrl(item.thumbnail) : null
+
+        let normalizedDetails: Array<{ label: string; value: string }> = []
+        if (item.details) {
+          if (Array.isArray(item.details)) {
+            normalizedDetails = item.details
+          } else if (typeof item.details === 'object') {
+            normalizedDetails = Object.entries(item.details).map(([label, value]) => ({
+              label,
+              value: String(value),
+            }))
+          }
+        }
+
+        return (
+          <div key={idx} className="chat-ui-feature-item">
+            <div className="chat-ui-feature-inner">
+              {/* Thumbnail or Left Icon */}
+              {resolvedThumb ? (
+                <div className="chat-ui-feature-thumb">
+                  <img
+                    src={resolvedThumb}
+                    alt={item.title}
+                    onError={(e) => {
+                      ;(e.currentTarget as HTMLImageElement).style.display = 'none'
+                    }}
+                  />
+                </div>
+              ) : (
+                <div className="chat-ui-feature-icon-box">
+                  <IconComp size={20} strokeWidth={2.2} />
+                </div>
+              )}
+
+              {/* Body Content */}
+              <div className="chat-ui-feature-body">
+                <div className="chat-ui-feature-top-row">
+                  <span className="chat-ui-feature-title">{item.title}</span>
+                  {item.badge && (
+                    <span
+                      className="chat-ui-feature-badge"
+                      style={{
+                        background: badgeTheme.bg,
+                        color: badgeTheme.color,
+                        border: `1px solid ${badgeTheme.border}`,
+                      }}
+                    >
+                      {item.badge}
+                    </span>
+                  )}
+                  {item.link && (
+                    <a
+                      href={item.link}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="chat-ui-feature-link"
+                    >
+                      <ExternalLink size={14} />
+                    </a>
+                  )}
+                </div>
+
+                {item.subtitle && (
+                  <div className="chat-ui-feature-subtitle">{item.subtitle}</div>
+                )}
+
+                {/* Key-Value Details */}
+                {normalizedDetails.length > 0 && (
+                  <div className="chat-ui-feature-details">
+                    {normalizedDetails.map((detail, dIdx) => (
+                      <div key={dIdx} className="chat-ui-feature-detail-row">
+                        <span className="chat-ui-feature-detail-label">
+                          {detail.label}:
+                        </span>
+                        <span className="chat-ui-feature-detail-value">
+                          {detail.value}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                )}
+
+                {/* Tags */}
+                {item.tags && item.tags.length > 0 && (
+                  <div className="chat-ui-feature-tags">
+                    {item.tags.map((tag, tIdx) => (
+                      <span key={tIdx} className="chat-ui-feature-tag">
+                        #{tag}
+                      </span>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/src/renderer/shared/components/UiGridCard.tsx

@@ -0,0 +1,188 @@
+import React from 'react'
+import {
+  MessageSquare,
+  Mail,
+  Smartphone,
+  Video,
+  Database,
+  Code,
+  Terminal,
+  File,
+  FileText,
+  Folder,
+  Cpu,
+  Zap,
+  Sparkles,
+  Check,
+  AlertCircle,
+  Layers,
+  Palette,
+  Globe,
+  Box,
+  Crop,
+  Shield,
+  Cloud,
+  Settings,
+  Download,
+  Upload,
+  Image,
+  Play,
+  Music,
+  HardDrive,
+  Sliders,
+  ExternalLink,
+  Lock,
+  CreditCard,
+  UserCheck,
+  User,
+  Repeat,
+  AlertTriangle,
+  Key,
+  Clock,
+  type LucideIcon,
+} from 'lucide-react'
+
+const ICON_MAP: Record<string, LucideIcon> = {
+  'message-square': MessageSquare,
+  chat: MessageSquare,
+  mail: Mail,
+  email: Mail,
+  smartphone: Smartphone,
+  phone: Smartphone,
+  mobile: Smartphone,
+  video: Video,
+  camera: Video,
+  database: Database,
+  db: Database,
+  code: Code,
+  terminal: Terminal,
+  file: File,
+  'file-text': FileText,
+  folder: Folder,
+  cpu: Cpu,
+  zap: Zap,
+  fast: Zap,
+  sparkles: Sparkles,
+  check: Check,
+  'alert-circle': AlertCircle,
+  'alert-triangle': AlertTriangle,
+  warning: AlertTriangle,
+  lock: Lock,
+  security: Shield,
+  shield: Shield,
+  key: Key,
+  'credit-card': CreditCard,
+  payment: CreditCard,
+  user: User,
+  'user-check': UserCheck,
+  repeat: Repeat,
+  sync: Repeat,
+  clock: Clock,
+  time: Clock,
+  layers: Layers,
+  palette: Palette,
+  globe: Globe,
+  web: Globe,
+  box: Box,
+  package: Box,
+  crop: Crop,
+  scan: Crop,
+  cloud: Cloud,
+  settings: Settings,
+  download: Download,
+  upload: Upload,
+  image: Image,
+  play: Play,
+  music: Music,
+  'hard-drive': HardDrive,
+  storage: HardDrive,
+  sliders: Sliders,
+  filter: Sliders,
+  link: ExternalLink,
+}
+
+export interface UiGridItem {
+  icon?: string
+  title: string
+  desc?: string
+  badge?: string
+  link?: string
+}
+
+export interface UiGridData {
+  title?: string
+  subtitle?: string
+  columns?: number
+  items?: UiGridItem[]
+}
+
+function resolveIcon(name?: string): LucideIcon {
+  if (!name) return Sparkles
+  const clean = name.toLowerCase().trim().replace(/_/g, '-')
+  return ICON_MAP[clean] || Sparkles
+}
+
+export default function UiGridCard({ data }: { data: UiGridData | UiGridItem[] }) {
+  let title: string | undefined
+  let subtitle: string | undefined
+  let items: UiGridItem[] = []
+  let columns: number | undefined
+
+  if (Array.isArray(data)) {
+    items = data
+  } else if (data && typeof data === 'object') {
+    title = data.title
+    subtitle = data.subtitle
+    columns = data.columns
+    items = Array.isArray(data.items) ? data.items : []
+  }
+
+  if (items.length === 0) return null
+
+  const gridCols = columns ? `repeat(${columns}, 1fr)` : 'repeat(auto-fit, minmax(200px, 1fr))'
+
+  return (
+    <div className="chat-ui-grid-wrapper">
+      {(title || subtitle) && (
+        <div className="chat-ui-grid-header">
+          {title && <h4 className="chat-ui-grid-header-title">{title}</h4>}
+          {subtitle && <p className="chat-ui-grid-header-subtitle">{subtitle}</p>}
+        </div>
+      )}
+
+      <div className="chat-ui-grid-grid" style={{ gridTemplateColumns: gridCols }}>
+        {items.map((item, idx) => {
+          const IconComp = resolveIcon(item.icon)
+          return (
+            <div key={idx} className="chat-ui-grid-item">
+              <div className="chat-ui-grid-item-top">
+                <div className="chat-ui-grid-item-icon">
+                  <IconComp size={18} strokeWidth={2.2} />
+                </div>
+                {item.badge && (
+                  <span
+                    style={{
+                      fontSize: '0.7rem',
+                      fontWeight: 600,
+                      padding: '2px 7px',
+                      borderRadius: '999px',
+                      background: 'rgba(16, 185, 129, 0.15)',
+                      color: '#34d399',
+                      border: '1px solid rgba(16, 185, 129, 0.3)',
+                    }}
+                  >
+                    {item.badge}
+                  </span>
+                )}
+              </div>
+
+              <div className="chat-ui-grid-item-title">{item.title}</div>
+
+              {item.desc && <div className="chat-ui-grid-item-desc">{item.desc}</div>}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

package/src/renderer/shared/components/UiMockupWidget.tsx

@@ -0,0 +1,149 @@
+import React, { useState } from 'react'
+import {
+  CloudUpload,
+  Sliders,
+  Sparkles,
+  FileCheck,
+  ChevronDown,
+  Info,
+} from 'lucide-react'
+
+export interface UiMockupOption {
+  label: string
+  value: string
+  options?: string[]
+}
+
+export interface UiMockupData {
+  title: string
+  subtitle?: string
+  dropzoneText?: string
+  dropzoneHint?: string
+  buttonText?: string
+  metrics?: Record<string, string>
+  options?: UiMockupOption[] | Record<string, string>
+  disclaimer?: string
+}
+
+export default function UiMockupWidget({ data }: { data: UiMockupData }) {
+  if (!data || typeof data !== 'object') return null
+
+  const title = data.title || 'App Preview'
+  const subtitle = data.subtitle
+  const dropzoneText = data.dropzoneText || 'ลากไฟล์มาวางที่นี่'
+  const dropzoneHint = data.dropzoneHint || 'หรือเลือกไฟล์จากอุปกรณ์ของคุณ'
+  const buttonText = data.buttonText || 'เลือกไฟล์'
+  const disclaimer =
+    data.disclaimer || 'ตัวอย่างแนวคิด UI เท่านั้น ยังไม่ใช่เครื่องมือที่ประมวลผลไฟล์ได้จริง'
+
+  // Options state
+  let initialOptions: Array<{ label: string; current: string; choices: string[] }> = []
+  if (Array.isArray(data.options)) {
+    initialOptions = data.options.map((opt) => ({
+      label: opt.label,
+      current: opt.value,
+      choices: opt.options || [opt.value],
+    }))
+  } else if (data.options && typeof data.options === 'object') {
+    initialOptions = Object.entries(data.options).map(([label, value]) => ({
+      label,
+      current: String(value),
+      choices: [String(value)],
+    }))
+  }
+
+  const [activeOptions, setActiveOptions] = useState(initialOptions)
+  const [isSimulatedActive, setIsSimulatedActive] = useState(false)
+
+  const handleOptionClick = (idx: number) => {
+    setActiveOptions((prev) => {
+      const next = [...prev]
+      const cur = next[idx]
+      if (cur && cur.choices.length > 1) {
+        const curIndex = cur.choices.indexOf(cur.current)
+        const nextIndex = (curIndex + 1) % cur.choices.length
+        next[idx] = { ...cur, current: cur.choices[nextIndex] }
+      }
+      return next
+    })
+  }
+
+  return (
+    <div className="chat-ui-mockup-container">
+      {/* Top Window Bar */}
+      <div className="chat-ui-mockup-header">
+        <div className="chat-ui-mockup-dots">
+          <span className="chat-ui-mockup-dot dot-red" />
+          <span className="chat-ui-mockup-dot dot-amber" />
+          <span className="chat-ui-mockup-dot dot-green" />
+        </div>
+        <div className="chat-ui-mockup-tag">Mockup concept</div>
+        <div style={{ width: '42px' }} />
+      </div>
+
+      {/* Main Mockup Body */}
+      <div className="chat-ui-mockup-body">
+        {/* Title & Subtitle */}
+        <h3 className="chat-ui-mockup-title">{title}</h3>
+        {subtitle && <p className="chat-ui-mockup-subtitle">{subtitle}</p>}
+
+        {/* Dropzone Container */}
+        <div
+          onClick={() => setIsSimulatedActive((prev) => !prev)}
+          className={`chat-ui-mockup-dropzone ${isSimulatedActive ? 'is-active' : ''}`}
+        >
+          <div className="chat-ui-mockup-dropzone-icon">
+            <CloudUpload size={22} />
+          </div>
+          <div className="chat-ui-mockup-dropzone-text">{dropzoneText}</div>
+          <div className="chat-ui-mockup-dropzone-hint">{dropzoneHint}</div>
+          <button type="button" className="chat-ui-mockup-dropzone-btn">
+            {buttonText}
+          </button>
+        </div>
+
+        {/* Metrics Rows (e.g. ขนาดไฟล์ 25MB) */}
+        {data.metrics && (
+          <div className="chat-ui-mockup-metrics">
+            {Object.entries(data.metrics).map(([key, val], mIdx) => (
+              <div key={mIdx} className="chat-ui-mockup-metric-row">
+                <span className="chat-ui-mockup-metric-label">{key}</span>
+                <span className="chat-ui-mockup-metric-pill">{val}</span>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* Options / Settings row */}
+        {activeOptions.length > 0 && (
+          <div
+            className="chat-ui-mockup-options"
+            style={{
+              gridTemplateColumns: `repeat(${Math.min(activeOptions.length, 2)}, 1fr)`,
+            }}
+          >
+            {activeOptions.map((opt, oIdx) => (
+              <div
+                key={oIdx}
+                onClick={() => handleOptionClick(oIdx)}
+                className={`chat-ui-mockup-option-card ${opt.choices.length > 1 ? 'is-clickable' : ''}`}
+              >
+                <span className="chat-ui-mockup-option-label">{opt.label}</span>
+                <span className="chat-ui-mockup-option-value">
+                  {opt.current}
+                  {opt.choices.length > 1 && <ChevronDown size={13} opacity={0.6} />}
+                </span>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* Footnote / Disclaimer */}
+        <div className="chat-ui-mockup-disclaimer">
+          <Info size={12} />
+          <span>{disclaimer}</span>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/renderer/shared/components/VeoStudioPanel.tsx

@@ -1,17 +1,11 @@
 import React, { useState, useRef, useCallback, useEffect } from 'react'
+import '../css/veo-studio.css'
 import { getActiveModel, setActiveModel, subscribeModelChange } from '../utils/modelManager'
-import {
-  generateVideo,
-  getVideoGenProviders,
-  fetchVideoProviderModels,
-  convertFileSrc,
-  getProfileValue,
-  setProfileValue,
-  type VideoGenRequest,
-  type VideoGenResponse,
-  type VideoGenProviders,
-  type VideoGenEntry,
-} from '@/tauri'
+import { catalogPlatform, mediaPlatform } from '../platform'
+import type { VideoGenRequest, VideoGenResponse, VideoGenProviders, VideoGenEntry } from '../types'
+
+const { generateVideo, getVideoGenProviders, fetchVideoProviderModels, convertFileSrc } = mediaPlatform
+const { getProfileValue, setProfileValue } = catalogPlatform
 
 type AspectRatio = '16:9' | '9:16' | '1:1'
 type Duration = 5 | 8
@@ -19,14 +13,13 @@ type Duration = 5 | 8
 interface VeoStudioPanelProps {
   view: string
   onSendToChat?: (prompt: string) => void
-  onToggleMobileSidebar?: () => void
 }
 
 import { VIDEO_ASPECT_RATIOS, VIDEO_STYLE_PRESETS } from '../constants/studio'
 
-const ASPECT_OPTIONS = VIDEO_ASPECT_RATIOS
+const ASPECT_Options = VIDEO_ASPECT_RATIOS
 
-const DURATION_OPTIONS: { value: Duration; label: string }[] = [
+const DURATION_Options: { value: Duration; label: string }[] = [
   { value: 5, label: '5s' },
   { value: 8, label: '8s' },
 ]
@@ -75,7 +68,7 @@ function VideoSkeletonCard() {
   )
 }
 
-export default function VeoStudioPanel({ view, onSendToChat, onToggleMobileSidebar }: VeoStudioPanelProps) {
+export default function VeoStudioPanel({ view, onSendToChat }: VeoStudioPanelProps) {
   const [prompt, setPrompt] = useState('')
   const [negativePrompt, setNegativePrompt] = useState('')
   const [showNegative, setShowNegative] = useState(false)
@@ -230,15 +223,6 @@ export default function VeoStudioPanel({ view, onSendToChat, onToggleMobileSideb
       {/* Header */}
       <header className="veo-studio-header">
         <div className="veo-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="23 7 16 12 23 17 23 7" />
             <rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
@@ -402,7 +386,7 @@ export default function VeoStudioPanel({ view, onSendToChat, onToggleMobileSideb
             <div className="veo-studio-field">
               <span className="veo-studio-label">Aspect ratio</span>
               <div className="veo-studio-aspect-group" role="radiogroup" aria-label="Aspect ratio">
-                {ASPECT_OPTIONS.map(({ value, label, icon }) => (
+                {ASPECT_Options.map(({ value, label, icon }) => (
                   <button
                     key={value}
                     type="button"
@@ -424,7 +408,7 @@ export default function VeoStudioPanel({ view, onSendToChat, onToggleMobileSideb
             <div className="veo-studio-field">
               <span className="veo-studio-label">Duration</span>
               <div className="veo-studio-duration-group" role="radiogroup" aria-label="Video duration">
-                {DURATION_OPTIONS.map(({ value, label }) => (
+                {DURATION_Options.map(({ value, label }) => (
                   <button
                     key={value}
                     type="button"
@@ -558,7 +542,7 @@ export default function VeoStudioPanel({ view, onSendToChat, onToggleMobileSideb
                               <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                                 <line x1="22" y1="2" x2="11" y2="13" /><polygon points="22 2 15 22 11 13 2 9 22 2" />
                               </svg>
-                              Send to Chat
+                              Send to chat
                             </button>
                           )}
                         </div>
@@ -592,7 +576,7 @@ export default function VeoStudioPanel({ view, onSendToChat, onToggleMobileSideb
                   <polygon points="23 7 16 12 23 17 23 7" />
                   <rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
                 </svg>
-                <span>Video History</span>
+                <span>Video history</span>
                 <span className="veo-studio-history-badge">{historyVideos.length}</span>
               </div>
             </div>