@pheem49/mint 1.15.0 → 1.17.0

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

@@ -1,100 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { Calculator } from 'lucide-react'
-
-export interface CalculationData {
-  expression: string
-  result: number
-}
-
-export default function CalculationCard({ data }: { data: CalculationData }) {
-  const formattedResult = typeof data.result === 'number'
-    ? (Number.isInteger(data.result) ? data.result.toLocaleString() : data.result.toLocaleString(undefined, { maximumFractionDigits: 6 }))
-    : String(data.result)
-
-  const [isDark, setIsDark] = useState(
-    () => (document.documentElement.getAttribute('data-theme') || 'dark') !== 'light'
-  )
-
-  useEffect(() => {
-    const observer = new MutationObserver(() => {
-      setIsDark((document.documentElement.getAttribute('data-theme') || 'dark') !== 'light')
-    })
-    observer.observe(document.documentElement, { attributeFilter: ['data-theme'] })
-    return () => observer.disconnect()
-  }, [])
-
-  const t = {
-    cardBg: isDark ? 'rgba(255,255,255,0.03)' : 'rgba(15,23,42,0.04)',
-    cardText: isDark ? '#f8fafc' : '#0f172a',
-    cardBorder: isDark ? 'rgba(255,255,255,0.08)' : 'rgba(15,23,42,0.12)',
-    cardShadow: isDark ? '0 8px 32px 0 rgba(0,0,0,0.2)' : '0 4px 20px 0 rgba(15,23,42,0.08)',
-    labelColor: isDark ? 'rgba(255,255,255,0.6)' : '#64748b',
-    exprBg: isDark ? 'rgba(255,255,255,0.04)' : 'rgba(15,23,42,0.05)',
-    exprBorder: isDark ? 'rgba(255,255,255,0.06)' : 'rgba(15,23,42,0.1)',
-    exprText: isDark ? '#cbd5e1' : '#334155',
-    dividerColor: isDark ? 'rgba(255,255,255,0.4)' : '#94a3b8',
-    resultBg: isDark ? 'rgba(255,255,255,0.04)' : 'rgba(15,23,42,0.05)',
-    resultBorder: isDark ? 'rgba(255,255,255,0.08)' : 'rgba(15,23,42,0.12)',
-    resultText: isDark ? '#ffffff' : '#0f172a',
-  }
-
-  return (
-    <div
-      style={{
-        background: t.cardBg,
-        backdropFilter: 'blur(16px)',
-        WebkitBackdropFilter: 'blur(16px)',
-        color: t.cardText,
-        borderRadius: '12px',
-        padding: '16px 20px',
-        margin: '12px 0',
-        boxShadow: t.cardShadow,
-        border: `1px solid ${t.cardBorder}`,
-        fontFamily: 'system-ui, -apple-system, sans-serif',
-      }}
-    >
-      {/* Header */}
-      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '12px' }}>
-        <Calculator size={16} strokeWidth={2} style={{ opacity: 0.9, color: t.labelColor }} />
-        <span style={{ fontSize: '11px', fontWeight: 700, letterSpacing: '0.8px', color: t.labelColor }}>
-          CALCULATION
-        </span>
-      </div>
-
-      {/* Input Expression */}
-      <div
-        style={{
-          background: t.exprBg,
-          border: `1px solid ${t.exprBorder}`,
-          borderRadius: '8px',
-          padding: '10px 14px',
-          fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
-          fontSize: '14px',
-          color: t.exprText,
-          letterSpacing: '0.3px',
-        }}
-      >
-        {data.expression}
-      </div>
-
-      {/* Equal Divider */}
-      <div style={{ display: 'flex', justifyContent: 'center', margin: '6px 0', color: t.dividerColor, fontSize: '16px', fontWeight: 'bold' }}>
-        =
-      </div>
-
-      {/* Result Display */}
-      <div
-        style={{
-          background: t.resultBg,
-          border: `1px solid ${t.resultBorder}`,
-          borderRadius: '10px',
-          padding: '12px 18px',
-        }}
-      >
-        <div style={{ fontSize: '30px', fontWeight: 800, color: t.resultText, fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace', letterSpacing: '-0.5px' }}>
-          {formattedResult}
-        </div>
-      </div>
-    </div>
-  )
-}

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

@@ -1,105 +0,0 @@
-/**
- * shared/components/ChatCodeBlock.tsx
- * Syntax-highlighted code block with copy + download actions.
- * Shared by both Desktop and Web ChatPanel — do NOT duplicate this.
- */
-import { useState, useMemo } from 'react'
-import { renderHighlightedCode } from '../utils/syntaxHighlight'
-
-interface Props {
-  code: string
-  language: string
-  key?: any
-}
-
-export function ChatCodeBlock({ code, language }: Props) {
-  const [copied, setCopied] = useState(false)
-
-  const handleCopy = async () => {
-    try {
-      await navigator.clipboard.writeText(code)
-      setCopied(true)
-      setTimeout(() => setCopied(false), 2000)
-    } catch (err) {
-      console.error('Failed to copy code: ', err)
-    }
-  }
-
-  const handleDownload = () => {
-    try {
-      const blob = new Blob([code], { type: 'text/plain;charset=utf-8' })
-      const url = URL.createObjectURL(blob)
-      const link = document.createElement('a')
-      link.href = url
-      const ext = language === 'plaintext' || !language ? 'txt' : language.toLowerCase()
-      link.download = `code.${ext}`
-      link.click()
-      URL.revokeObjectURL(url)
-    } catch (err) {
-      console.error('Failed to download code: ', err)
-    }
-  }
-
-  const cleanLang = (language || 'plaintext').toLowerCase().trim()
-  const displayLang = cleanLang === 'plaintext' ? 'text' : cleanLang
-
-  const lineCount = useMemo(() => {
-    if (!code) return 1
-    return code.split('\n').length
-  }, [code])
-
-  const showLineNumbers = lineCount > 1
-
-  return (
-    <div className="chat-code-block-container" style={{ whiteSpace: 'normal' }}>
-      <div className="chat-code-block-header">
-        <div className="chat-code-block-meta">
-          <span className="chat-code-block-lang">{displayLang}</span>
-          {lineCount > 3 && (
-            <span className="chat-code-block-lines">{lineCount} lines</span>
-          )}
-        </div>
-        <div className="chat-code-block-actions">
-          <button
-            type="button"
-            onClick={handleDownload}
-            title="Download code"
-            className="chat-code-action-btn chat-code-download-btn"
-          >
-            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-              <polyline points="7 10 12 15 17 10" />
-              <line x1="12" y1="15" x2="12" y2="3" />
-            </svg>
-          </button>
-          <button
-            type="button"
-            onClick={handleCopy}
-            title="Copy code"
-            className={`chat-code-action-btn chat-code-copy-btn ${copied ? 'is-copied' : ''}`}
-          >
-            {copied ? (
-              <>
-                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
-                  <polyline points="20 6 9 17 4 12" />
-                </svg>
-                <span className="chat-code-btn-label">Copied!</span>
-              </>
-            ) : (
-              <>
-                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
-                  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-                </svg>
-                <span className="chat-code-btn-label">Copy</span>
-              </>
-            )}
-          </button>
-        </div>
-      </div>
-      <pre className="chat-code-block-body">
-        <code>{renderHighlightedCode(code, cleanLang, showLineNumbers)}</code>
-      </pre>
-    </div>
-  )
-}

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

@@ -1,306 +0,0 @@
-import React, { useMemo } from 'react'
-import { renderFormattedMessage, renderCopyIcon, renderSpeakerIcon } from '../utils/markdown'
-import { fallbackNotice } from '../utils/providers'
-import WeatherCard from './WeatherCard'
-import StockCard from './StockCard'
-import CalculationCard from './CalculationCard'
-import ImageSearchCard from './ImageSearchCard'
-import ImageGenCard from './ImageGenCard'
-import { parseUtcDate } from '../utils/ui'
-import { parseWebSearchSources } from '../utils/agentActivity'
-
-export interface ChatMessageItemProps {
-  interaction: any
-  copiedId: string | number | null
-  onEditMessage?: (text: string) => void
-  speakingText: string | null
-  agentActivitySnapshots: Record<string, any[]>
-  thinkingExpanded: Record<string, boolean>
-  openActivityIds?: Record<string, boolean>
-  openReviewIds?: Record<string, boolean>
-  openFileDiffs?: Record<string, boolean>
-  onThinkingExpandedChange: (key: string, expanded: boolean) => void
-  handleCopyMessage: (id: string | number, text: string) => void
-  speak: (text: string) => void
-  renderCompletedActivity: (interaction: any) => React.ReactNode
-  renderFileChanges: (interaction: any) => React.ReactNode
-  renderWebSearchSources: (interaction: any) => React.ReactNode
-}
-
-const ChatMessageItem = React.memo(
-  function ChatMessageItem(props: ChatMessageItemProps) {
-    const {
-      interaction,
-      copiedId,
-      onEditMessage,
-      speakingText,
-      agentActivitySnapshots,
-      thinkingExpanded,
-      openActivityIds,
-      openReviewIds,
-      openFileDiffs,
-      onThinkingExpandedChange,
-      handleCopyMessage,
-      speak,
-      renderCompletedActivity,
-      renderFileChanges,
-      renderWebSearchSources,
-    } = props
-
-    const isSystemEvent = interaction.provider === 'system' && interaction.model === 'provider_change'
-
-    const memoizedUserContent = useMemo(() => {
-      if (!interaction.userText) return null
-      return renderFormattedMessage(interaction.userText)
-    }, [interaction.userText])
-
-    const progress = agentActivitySnapshots[String(interaction.id)] ?? interaction.agentActivity ?? []
-    const webSources = useMemo(() => parseWebSearchSources(progress), [progress])
-    const memoizedAiContent = useMemo(() => {
-      if (!interaction.aiText) return null
-      return renderFormattedMessage(interaction.aiText, webSources)
-    }, [interaction.aiText, webSources])
-
-    if (isSystemEvent) {
-      const rawText = interaction.userText || ''
-      const cleanText = rawText.replace(/^Changed model to\s*/i, '').trim()
-      return (
-        <div key={interaction.id} className="system-event-divider">
-          <div className="system-event-line" />
-          <div className="system-event-pill">
-            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-              <path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" />
-            </svg>
-            <span>{cleanText}</span>
-          </div>
-          <div className="system-event-line" />
-        </div>
-      )
-    }
-
-    const isUserCopied = copiedId === `user-${interaction.id}`
-    const isAiCopied = copiedId === interaction.id
-    const isSpeaking = speakingText === interaction.aiText
-
-    const fallbackWeatherData = useMemo(() => {
-      if (interaction.aiText && (interaction.aiText.includes('```weather_json') || interaction.aiText.includes('```weather-json'))) {
-        return null
-      }
-      for (const event of progress || []) {
-        if (event.type === 'ToolEnd' && (event.data?.action === 'weather' || event.data?.name === 'weather')) {
-          const res = event.data.result || event.data.output || ''
-          const match = typeof res === 'string' && res.match(/```weather_json\s*([\s\S]*?)\s*```/)
-          if (match && match[1]) {
-            try {
-              return JSON.parse(match[1])
-            } catch {}
-          }
-        }
-      }
-      return null
-    }, [interaction.aiText, progress])
-
-    const fallbackStockData = useMemo(() => {
-      if (interaction.aiText && (interaction.aiText.includes('```stock_json') || interaction.aiText.includes('```stock-json'))) {
-        return null
-      }
-      for (const event of progress || []) {
-        if (event.type === 'ToolEnd' && (event.data?.action === 'stock' || event.data?.name === 'stock')) {
-          const res = event.data.result || event.data.output || ''
-          const match = typeof res === 'string' && res.match(/```stock_json\s*([\s\S]*?)\s*```/)
-          if (match && match[1]) {
-            try {
-              return JSON.parse(match[1])
-            } catch {}
-          }
-        }
-      }
-      return null
-    }, [interaction.aiText, progress])
-
-    const fallbackCalcData = useMemo(() => {
-      if (interaction.aiText && (interaction.aiText.includes('```calculation_json') || interaction.aiText.includes('```calculation-json'))) {
-        return null
-      }
-      for (const event of progress || []) {
-        if (event.type === 'ToolEnd' && (event.data?.action === 'calculation' || event.data?.name === 'calculation')) {
-          const res = event.data.result || event.data.output || ''
-          const match = typeof res === 'string' && res.match(/```calculation_json\s*([\s\S]*?)\s*```/)
-          if (match && match[1]) {
-            try {
-              return JSON.parse(match[1])
-            } catch {}
-          }
-        }
-      }
-      return null
-    }, [interaction.aiText, progress])
-
-    const fallbackImageSearchData = useMemo(() => {
-      if (interaction.aiText && (interaction.aiText.includes('```image_search_json') || interaction.aiText.includes('```image-search-json'))) {
-        return null
-      }
-      for (const event of progress || []) {
-        if (event.type === 'ToolEnd' && (event.data?.action === 'image_search' || event.data?.name === 'image_search')) {
-          const res = event.data.result || event.data.output || ''
-          const match = typeof res === 'string' && res.match(/```image_search_json\s*([\s\S]*?)\s*```/)
-          if (match && match[1]) {
-            try {
-              return JSON.parse(match[1])
-            } catch {}
-          }
-        }
-      }
-      return null
-    }, [interaction.aiText, progress])
-
-    const fallbackImageGenData = useMemo(() => {
-      if (interaction.aiText && (interaction.aiText.includes('```image_gen_json') || interaction.aiText.includes('```image-gen-json'))) {
-        return null
-      }
-      const imageGenActions = new Set(['generate_image', 'image_studio.generate', 'image_generate'])
-      for (const event of progress || []) {
-        if (event.type === 'ToolEnd' && (imageGenActions.has(event.data?.action) || imageGenActions.has(event.data?.name))) {
-          const res = event.data.result || event.data.output || ''
-          const match = typeof res === 'string' && res.match(/```image_gen_json\s*([\s\S]*?)\s*```/)
-          if (match && match[1]) {
-            try {
-              return JSON.parse(match[1])
-            } catch {}
-          }
-        }
-      }
-      return null
-    }, [interaction.aiText, progress])
-
-    return (
-      <div key={interaction.id} style={{ display: 'flex', flexDirection: 'column', gap: '8px', marginBottom: '16px' }}>
-        {interaction.userText && (
-          <div className="message user-message">
-            <div className="bubble-wrapper">
-              <div className="message-bubble">{memoizedUserContent}</div>
-              <div className="message-time" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                <span>{parseUtcDate(interaction.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span>
-                <button
-                  type="button"
-                  className={`msg-action-btn copy-btn ${isUserCopied ? 'is-copied' : ''}`}
-                  onClick={() => handleCopyMessage(`user-${interaction.id}`, interaction.userText)}
-                  title={isUserCopied ? 'คัดลอกแล้ว (Copied!)' : 'คัดลอกข้อความ (Copy)'}
-                >
-                  {renderCopyIcon(isUserCopied)}
-                </button>
-                {onEditMessage && interaction.provider !== 'system' && (
-                  <button
-                    type="button"
-                    className="msg-action-btn edit-btn"
-                    onClick={() => onEditMessage(interaction.userText)}
-                    title="แก้ไขและส่งใหม่ (Edit & resend)"
-                  >
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                      <path d="M12 20h9"></path>
-                      <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
-                    </svg>
-                  </button>
-                )}
-              </div>
-            </div>
-          </div>
-        )}
-        <div className="message ai-message">
-          <div className="bubble-wrapper">
-            {interaction.status === 'completed' && renderCompletedActivity(interaction)}
-            {interaction.status === 'completed' && renderFileChanges(interaction)}
-            <div className="message-bubble">
-              {interaction.status === 'queued' && <span>Queued for this session…</span>}
-              {interaction.status === 'running' && <span>Mint is responding…</span>}
-              {interaction.status === 'failed' && <span>This turn failed. Send the prompt again to retry.</span>}
-              {interaction.status === 'interrupted' && <span>This turn was interrupted. Send the prompt again to retry.</span>}
-              {fallbackWeatherData && <WeatherCard data={fallbackWeatherData} />}
-              {fallbackStockData && <StockCard data={fallbackStockData} />}
-              {fallbackCalcData && <CalculationCard data={fallbackCalcData} />}
-              {fallbackImageSearchData && <ImageSearchCard data={fallbackImageSearchData} />}
-              {fallbackImageGenData && <ImageGenCard data={fallbackImageGenData} />}
-              {memoizedAiContent}
-            </div>
-            {renderWebSearchSources(interaction)}
-            <div className="message-time" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-              {interaction.status === 'completed' && <span className="provider-model-chip" data-provider={(interaction.provider || '').toLowerCase()} title={`${interaction.provider} • ${interaction.model}`}>
-                <span className="provider-chip-dot" aria-hidden="true" />
-                <span className="provider-chip-name">{interaction.provider}</span>
-                <span className="provider-chip-divider">/</span>
-                <span className="provider-chip-model">{interaction.model}</span>
-              </span>}
-              {fallbackNotice(interaction) && <span className="provider-fallback-notice">{fallbackNotice(interaction)}</span>}
-              <span className="message-timestamp">{parseUtcDate(interaction.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span>
-              {interaction.status === 'completed' && <div className="message-action-buttons" style={{ display: 'flex', alignItems: 'center', gap: '4px', marginLeft: 'auto' }}>
-                <button
-                  type="button"
-                  className={`msg-action-btn copy-btn ${isAiCopied ? 'is-copied' : ''}`}
-                  onClick={() => handleCopyMessage(interaction.id, interaction.aiText)}
-                  title={isAiCopied ? 'คัดลอกแล้ว (Copied!)' : 'คัดลอกข้อความ (Copy message)'}
-                >
-                  {renderCopyIcon(isAiCopied)}
-                </button>
-                <button
-                  type="button"
-                  className={`msg-action-btn tts-btn ${isSpeaking ? 'is-speaking' : ''}`}
-                  onClick={() => speak(interaction.aiText)}
-                  title={isSpeaking ? 'Stop reading' : 'Read aloud'}
-                >
-                  {renderSpeakerIcon(isSpeaking)}
-                </button>
-              </div>}
-            </div>
-          </div>
-        </div>
-      </div>
-    )
-  },
-  (prevProps, nextProps) => {
-    const p = prevProps.interaction
-    const n = nextProps.interaction
-    if (p.id !== n.id || p.aiText !== n.aiText || p.userText !== n.userText || p.createdAt !== n.createdAt || p.status !== n.status || p.agentActivity !== n.agentActivity) {
-      return false
-    }
-
-    const prevUserCopied = prevProps.copiedId === `user-${p.id}`
-    const nextUserCopied = nextProps.copiedId === `user-${n.id}`
-    if (prevUserCopied !== nextUserCopied) return false
-
-    const prevAiCopied = prevProps.copiedId === p.id
-    const nextAiCopied = nextProps.copiedId === n.id
-    if (prevAiCopied !== nextAiCopied) return false
-
-    const prevSpeaking = prevProps.speakingText === p.aiText
-    const nextSpeaking = nextProps.speakingText === n.aiText
-    if (prevSpeaking !== nextSpeaking) return false
-
-    const prevExpanded = prevProps.thinkingExpanded[String(p.id)] ?? false
-    const nextExpanded = nextProps.thinkingExpanded[String(n.id)] ?? false
-    if (prevExpanded !== nextExpanded) return false
-
-    const prevExtExpanded = prevProps.thinkingExpanded[`extended-${p.id}`] ?? false
-    const nextExtExpanded = nextProps.thinkingExpanded[`extended-${n.id}`] ?? false
-    if (prevExtExpanded !== nextExtExpanded) return false
-
-    const prevOpenActivity = prevProps.openActivityIds?.[String(p.id)] ?? false
-    const nextOpenActivity = nextProps.openActivityIds?.[String(n.id)] ?? false
-    if (prevOpenActivity !== nextOpenActivity) return false
-
-    const prevOpenReview = prevProps.openReviewIds?.[String(p.id)] ?? false
-    const nextOpenReview = nextProps.openReviewIds?.[String(n.id)] ?? false
-    if (prevOpenReview !== nextOpenReview) return false
-
-    const prevOpenFileDiffs = prevProps.openFileDiffs
-    const nextOpenFileDiffs = nextProps.openFileDiffs
-    if (prevOpenFileDiffs !== nextOpenFileDiffs) return false
-
-    const prevSnap = prevProps.agentActivitySnapshots[String(p.id)]
-    const nextSnap = nextProps.agentActivitySnapshots[String(n.id)]
-    if (prevSnap !== nextSnap) return false
-
-    return true
-  }
-)
-
-export default ChatMessageItem