@pheem49/mint 1.6.4 → 1.7.1

package/src/renderer/src-web/App.tsx

@@ -19,7 +19,22 @@ export default function App() {
 
   let content = <MintDashboard />
 
-  if (route.startsWith('/settings')) content = <SettingsWindow />
+  // For web, show settings as a centered modal overlay instead of a full-page route
+  if (route.startsWith('/settings')) {
+    content = (
+      <>
+        <MintDashboard />
+        <div
+          className="settings-modal-overlay"
+          onClick={() => window.settingsApi?.closeSettings?.()}
+        >
+          <div className="settings-modal" onClick={(e) => e.stopPropagation()}>
+            <SettingsWindow />
+          </div>
+        </div>
+      </>
+    )
+  }
 
   return <Suspense fallback={null}>{content}</Suspense>
 }

package/src/renderer/src-web/agentProgress.ts

@@ -0,0 +1,39 @@
+import type { AgentProgress, InteractionMemory } from './tauri'
+
+export function thoughtsFrom(progress: AgentProgress[]): string[] {
+  return progress
+    .filter((event) => event.type === 'Thought')
+    .map((event) => (event as Extract<AgentProgress, { type: 'Thought' }>).data.thought)
+    .filter(Boolean)
+}
+
+export function trimAgentProgress(progress: AgentProgress[], maxNonThought = 20): AgentProgress[] {
+  if (progress.length === 0) return progress
+  const keptNonThought = new Set(
+    progress.filter((event) => event.type !== 'Thought').slice(-maxNonThought),
+  )
+  return progress.filter((event) => event.type === 'Thought' || keptNonThought.has(event))
+}
+
+export function hasAgentToolActivity(progress: AgentProgress[]): boolean {
+  return progress.some((event) => event.type === 'ToolStart' || event.type === 'ToolEnd')
+}
+
+export function mergeActivitySnapshots(
+  current: Record<string, AgentProgress[]>,
+  interactions: InteractionMemory[],
+): Record<string, AgentProgress[]> {
+  const merged = { ...current }
+  for (const interaction of interactions) {
+    const key = String(interaction.id)
+    if (interaction.agentActivity?.length && !merged[key]) {
+      merged[key] = interaction.agentActivity
+    }
+  }
+  return merged
+}
+
+export function parseAgentActivity(value: unknown): AgentProgress[] | undefined {
+  if (!Array.isArray(value)) return undefined
+  return value as AgentProgress[]
+}

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

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState, Fragment, type ChangeEvent, type ClipboardEvent, type FormEvent, type KeyboardEvent, type RefObject, type DragEvent } from 'react'
+import { hasAgentToolActivity, thoughtsFrom } from '../agentProgress'
 import {
   type AgentProgress,
   type ChatResponse,
@@ -327,6 +328,8 @@ interface ChatPanelProps {
   streamedResponse: ChatResponse | null
   agentProgress: AgentProgress[]
   agentActivitySnapshots: Record<string, AgentProgress[]>
+  thinkingExpanded: Record<string, boolean>
+  onThinkingExpandedChange: (key: string, open: boolean) => void
   message: string
   imageAttachments: Array<{ dataUri: string; name: string; previewDataUri?: string }>
   documentName: string
@@ -418,6 +421,11 @@ function ChatCodeBlock({ code, language }: { code: string; language: string; key
   )
 }
 
+const isTableLine = (line: string): boolean => {
+  const trimmed = line.trim()
+  return trimmed.startsWith('|') && trimmed.endsWith('|') && trimmed.length > 1
+}
+
 function renderFormattedMessage(text: string) {
   const displayText = readableAssistantText(text)
   if (!displayText) return null
@@ -446,6 +454,113 @@ function renderFormattedMessage(text: string) {
     })
   }
 
+  const renderHtmlTable = (tableLines: string[], key: string) => {
+    const rows: string[][] = []
+    for (const line of tableLines) {
+      const trimmed = line.trim()
+      if (!trimmed) continue
+      const content = trimmed.slice(1, -1)
+      const contentEscaped = content.replace(/\\\|/g, '\u0000')
+      const cols = contentEscaped.split('|').map(s => s.replace(/\u0000/g, '|').trim())
+      rows.push(cols)
+    }
+
+    if (rows.length === 0) return null
+
+    let hasSeparator = false
+    let separatorIdx = -1
+    for (let i = 0; i < rows.length; i++) {
+      const row = rows[i]
+      if (row.length > 0 && row.every(col => /^[-\s:]+$/.test(col))) {
+        hasSeparator = true
+        separatorIdx = i
+        break
+      }
+    }
+
+    let headerRow: string[] | null = null
+    const dataRows: string[][] = []
+
+    if (hasSeparator) {
+      if (separatorIdx > 0) {
+        headerRow = rows[separatorIdx - 1]
+        for (let i = 0; i < rows.length; i++) {
+          if (i !== separatorIdx && i !== separatorIdx - 1) {
+            dataRows.push(rows[i])
+          }
+        }
+      } else {
+        for (let i = 0; i < rows.length; i++) {
+          if (i !== separatorIdx) {
+            dataRows.push(rows[i])
+          }
+        }
+      }
+    } else {
+      headerRow = rows[0]
+      for (let i = 1; i < rows.length; i++) {
+        dataRows.push(rows[i])
+      }
+    }
+
+    return (
+      <div key={key} className="chat-table-container" style={{
+        overflowX: 'auto',
+        margin: '14px 0',
+        width: '100%',
+        borderRadius: '8px',
+        border: '1px solid rgba(255, 255, 255, 0.12)',
+        background: 'rgba(30, 41, 59, 0.35)',
+        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+      }}>
+        <table className="chat-table" style={{
+          width: '100%',
+          borderCollapse: 'collapse',
+          fontSize: '0.86rem',
+          textAlign: 'left',
+          lineHeight: '1.5',
+        }}>
+          {headerRow && (
+            <thead>
+              <tr style={{
+                background: 'rgba(255, 255, 255, 0.04)',
+                borderBottom: '2px solid rgba(255, 255, 255, 0.15)',
+              }}>
+                {headerRow.map((col, idx) => (
+                  <th key={`th-${idx}`} style={{
+                    padding: '12px 16px',
+                    fontWeight: 700,
+                    color: 'var(--accent, #38bdf8)',
+                    fontFamily: 'ui-sans-serif, system-ui, sans-serif',
+                  }}>
+                    {formatInline(col)}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+          )}
+          <tbody>
+            {dataRows.map((row, rIdx) => (
+              <tr key={`tr-${rIdx}`} style={{
+                background: rIdx % 2 === 1 ? 'rgba(255, 255, 255, 0.015)' : 'transparent',
+                borderBottom: rIdx < dataRows.length - 1 ? '1px solid rgba(255, 255, 255, 0.08)' : 'none',
+              }}>
+                {row.map((col, cIdx) => (
+                  <td key={`td-${cIdx}`} style={{
+                    padding: '12px 16px',
+                    color: 'var(--text-main, #e2e8f0)',
+                  }}>
+                    {formatInline(col)}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    )
+  }
+
   const lines = displayText.split('\n')
   const items: any[] = []
 
@@ -453,10 +568,24 @@ function renderFormattedMessage(text: string) {
   let codeBlockLang = ''
   let codeBlockLines: string[] = []
 
+  let inTable = false
+  let tableLines: string[] = []
+
+  const flushTable = (index: number) => {
+    if (tableLines.length > 0) {
+      items.push(renderHtmlTable(tableLines, `table-${index}`))
+      tableLines = []
+      inTable = false
+    }
+  }
+
   for (let i = 0; i < lines.length; i++) {
     const line = lines[i]
 
     if (line.trim().startsWith('```')) {
+      if (inTable) {
+        flushTable(i)
+      }
       if (inCodeBlock) {
         const codeText = codeBlockLines.join('\n')
         items.push(
@@ -480,35 +609,60 @@ function renderFormattedMessage(text: string) {
       continue
     }
 
-    const headerMatch = line.match(/^(#{1,6})\s+(.*)$/)
-    if (headerMatch) {
-      const level = headerMatch[1].length
-      const content = headerMatch[2]
-
-      const style = {
-        fontWeight: 'bold',
-        display: 'block',
-        marginTop: level === 1 ? '16px' : level === 2 ? '14px' : '10px',
-        marginBottom: '6px',
-        fontSize: level === 1 ? '1.25em' : level === 2 ? '1.15em' : '1.05em',
-        color: 'var(--text-main)',
+    if (isTableLine(line)) {
+      inTable = true
+      tableLines.push(line)
+    } else {
+      if (inTable) {
+        flushTable(i)
       }
 
-      items.push(
-        <span key={`line-${i}`} style={style}>
-          {formatInline(content)}
-        </span>
-      )
-    } else {
-      items.push(
-        <Fragment key={`line-${i}`}>
-          {formatInline(line)}
-          {i < lines.length - 1 && '\n'}
-        </Fragment>
-      )
+      const headerMatch = line.match(/^(#{1,6})\s+(.*)$/)
+      if (headerMatch) {
+        const level = headerMatch[1].length
+        const content = headerMatch[2]
+
+        const style = {
+          fontWeight: 'bold',
+          display: 'block',
+          marginTop: level === 1 ? '16px' : level === 2 ? '14px' : '10px',
+          marginBottom: '6px',
+          fontSize: level === 1 ? '1.25em' : level === 2 ? '1.15em' : '1.05em',
+          color: 'var(--text-main)',
+        }
+
+        items.push(
+          <span key={`line-${i}`} style={style}>
+            {formatInline(content)}
+          </span>
+        )
+      } else {
+        const listMatch = line.match(/^(\s*)([-*+])\s+(.*)$/)
+        if (listMatch) {
+          const indent = listMatch[1]
+          const content = listMatch[3]
+          items.push(
+            <Fragment key={`line-${i}`}>
+              {indent}• {formatInline(content)}
+              {i < lines.length - 1 && '\n'}
+            </Fragment>
+          )
+        } else {
+          items.push(
+            <Fragment key={`line-${i}`}>
+              {formatInline(line)}
+              {i < lines.length - 1 && '\n'}
+            </Fragment>
+          )
+        }
+      }
     }
   }
 
+  if (inTable) {
+    flushTable(lines.length)
+  }
+
   if (inCodeBlock && codeBlockLines.length > 0) {
     const codeText = codeBlockLines.join('\n')
     items.push(
@@ -523,6 +677,98 @@ function renderFormattedMessage(text: string) {
   return items
 }
 
+const THINKING_LABELS = {
+  live: 'Thinking…',
+  completed: (count: number) => `Thinking process (${count} steps)`,
+  step: (index: number) => `Step ${index}`,
+  emptyHint: 'Model didn\'t send thinking steps this time',
+} as const
+
+function ThinkingBlock({
+  thoughts,
+  isLive = false,
+  blockKey,
+  expanded,
+  onExpandedChange,
+  showEmptyHint = false,
+}: {
+  thoughts: string[]
+  isLive?: boolean
+  blockKey: string
+  expanded?: boolean
+  onExpandedChange?: (key: string, open: boolean) => void
+  showEmptyHint?: boolean
+}) {
+  const contentRef = useRef<HTMLDivElement>(null)
+  const isControlled = expanded !== undefined && Boolean(onExpandedChange)
+  const [localOpen, setLocalOpen] = useState(isLive)
+  const isOpen = isControlled ? Boolean(expanded) : localOpen
+
+  const setOpen = (open: boolean) => {
+    if (isControlled && onExpandedChange) onExpandedChange(blockKey, open)
+    else setLocalOpen(open)
+  }
+
+  useEffect(() => {
+    if (isLive && !isControlled) setLocalOpen(true)
+  }, [isLive, isControlled])
+
+  useEffect(() => {
+    if (!isLive || !isOpen || !contentRef.current) return
+    contentRef.current.scrollTop = contentRef.current.scrollHeight
+  }, [thoughts, isLive, isOpen])
+
+  if (thoughts.length === 0 && !showEmptyHint) return null
+
+  if (thoughts.length === 0) {
+    return (
+      <div className="thinking-block thinking-block-empty-state" data-live={isLive ? 'true' : 'false'}>
+        <span className="thinking-block-empty">{THINKING_LABELS.emptyHint}</span>
+      </div>
+    )
+  }
+
+  return (
+    <div className={`thinking-block${isLive ? ' is-live' : ''}`}>
+      <button
+        type="button"
+        className="thinking-block-header"
+        onClick={() => setOpen(!isOpen)}
+        aria-expanded={isOpen}
+      >
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
+          <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
+          <line x1="12" y1="17" x2="12.01" y2="17" />
+          <circle cx="12" cy="12" r="10" />
+        </svg>
+        <span className="thinking-block-label">
+          {isLive ? THINKING_LABELS.live : THINKING_LABELS.completed(thoughts.length)}
+        </span>
+        {isLive && <span className="thinking-block-live-dot" aria-hidden="true" />}
+        <span className={`thinking-block-chevron${isOpen ? ' is-open' : ''}`} aria-hidden="true">
+          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+            <polyline points="9 18 15 12 9 6" />
+          </svg>
+        </span>
+      </button>
+      {isOpen && (
+        <div className="thinking-block-body">
+          <div className="thinking-block-content" ref={contentRef}>
+            {thoughts.map((thought, index) => (
+              <div className="thinking-block-step" key={`${blockKey}-${index}`}>
+                {thoughts.length > 1 && (
+                  <div className="thinking-block-step-label">{THINKING_LABELS.step(index + 1)}</div>
+                )}
+                <div className="thinking-block-step-body">{renderFormattedMessage(thought)}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
 function readableAssistantText(text: string) {
   if (typeof text !== 'string') return ''
   const trimmed = text.trim()
@@ -692,6 +938,8 @@ export default function ChatPanel({
   streamedResponse,
   agentProgress,
   agentActivitySnapshots,
+  thinkingExpanded,
+  onThinkingExpandedChange,
   message,
   imageAttachments,
   documentName,
@@ -821,7 +1069,7 @@ export default function ChatPanel({
   const speakingRef = useRef<string | null>(null)
   const restartTimerRef = useRef<number | null>(null)
   const voiceStatus = speakingText ? 'speaking' : (sending || voiceAwaitingResponse) ? 'thinking' : isRecording ? 'listening' : voiceMode ? 'ready' : 'off'
-  const voiceStatusLabel = voiceStatus === 'speaking' ? 'กำลังตอบ' : voiceStatus === 'thinking' ? 'กำลังคิด' : voiceStatus === 'listening' ? 'กำลังฟัง' : 'พร้อมฟัง'
+  const voiceStatusLabel = voiceStatus === 'speaking' ? 'Speaking' : voiceStatus === 'thinking' ? 'Thinking' : voiceStatus === 'listening' ? 'Listening' : 'Ready'
 
   const clearRestartTimer = () => {
     if (restartTimerRef.current === null) return
@@ -943,7 +1191,7 @@ export default function ChatPanel({
   }
   const startAudioRecording = async (autoSend: boolean) => {
     if (!navigator.mediaDevices?.getUserMedia || typeof MediaRecorder === 'undefined') {
-      alert('ขออภัย ระบบนี้ไม่สามารถเข้าถึงไมค์หรืออัดเสียงในเบราว์เซอร์นี้ได้')
+      alert("Sorry, this system cannot access the microphone or record audio in this browser")
       voiceModeRef.current = false
       setVoiceMode(false)
       return
@@ -966,7 +1214,7 @@ export default function ChatPanel({
       mediaStreamRef.current = stream
       mediaRecorderRef.current = recorder
       audioContextRef.current = audioContext
-      setVoiceTranscript('กำลังฟังเสียงจากไมค์')
+      setVoiceTranscript('Listening to microphone...')
 
       recorder.ondataavailable = (event) => {
         if (event.data.size > 0) chunks.push(event.data)
@@ -981,13 +1229,13 @@ export default function ChatPanel({
         setIsRecording(false)
         if (!autoSend || !voiceModeRef.current || chunks.length === 0) return
         if (!heardVoice) {
-          setVoiceTranscript('ยังไม่ได้ยินเสียงพูด')
+          setVoiceTranscript('No speech detected')
           scheduleVoiceListen(700)
           return
         }
         const blob = new Blob(chunks, { type: recorder.mimeType || 'audio/webm' })
         const audioDataUri = await blobToDataUri(blob)
-        setVoiceTranscript('ส่งเสียงให้ AI แล้ว')
+        setVoiceTranscript('Sent audio to AI')
         voiceAwaitingResponseRef.current = true
         setVoiceAwaitingResponse(true)
         onSendVoiceMessage('', audioDataUri)
@@ -1011,7 +1259,7 @@ export default function ChatPanel({
         if (peak > 12) {
           heardVoice = true
           quietSince = 0
-          setVoiceTranscript('กำลังฟัง...')
+          setVoiceTranscript('Listening...')
         } else if (heardVoice) {
           quietSince = quietSince || now
         }
@@ -1026,7 +1274,7 @@ export default function ChatPanel({
       setIsRecording(false)
       voiceModeRef.current = false
       setVoiceMode(false)
-      alert('เปิดไมค์ไม่สำเร็จ กรุณาตรวจสิทธิ์ microphone ของเบราว์เซอร์')
+      alert('Failed to open microphone. Please check microphone permissions in your browser')
     }
   }
   const startRecognition = (autoSend: boolean) => {
@@ -1544,8 +1792,8 @@ export default function ChatPanel({
           }}
         >
           <div style={{ fontSize: '3.5rem', marginBottom: '16px' }}>🖼️</div>
-          <div style={{ fontSize: '1.25rem', fontWeight: 'bold', letterSpacing: '0.5px' }}>วางไฟล์เพื่อแนบข้อมูล</div>
-          <div style={{ fontSize: '0.85rem', color: '#94a3b8', marginTop: '8px' }}>รองรับรูปภาพ (PNG, JPEG, WebP, GIF) และไฟล์ PDF</div>
+          <div style={{ fontSize: '1.25rem', fontWeight: 'bold', letterSpacing: '0.5px' }}>Drag files to attach data</div>
+          <div style={{ fontSize: '0.85rem', color: '#94a3b8', marginTop: '8px' }}>Supports images (PNG, JPEG, WebP, GIF) and PDF files</div>
         </div>
       )}
 
@@ -1568,6 +1816,19 @@ export default function ChatPanel({
               <div className="bubble-wrapper">
                 {renderCompletedActivity(interaction)}
                 {renderFileChanges(interaction)}
+                {(() => {
+                  const progress = agentActivitySnapshots[String(interaction.id)] ?? interaction.agentActivity ?? []
+                  const thoughts = thoughtsFrom(progress)
+                  return (
+                    <ThinkingBlock
+                      blockKey={String(interaction.id)}
+                      thoughts={thoughts}
+                      expanded={thinkingExpanded[String(interaction.id)] ?? false}
+                      onExpandedChange={onThinkingExpandedChange}
+                      showEmptyHint={hasAgentToolActivity(progress) && thoughts.length === 0}
+                    />
+                  )
+                })()}
                 <div className="message-bubble" style={{ whiteSpace: 'pre-wrap' }}>{renderFormattedMessage(interaction.aiText)}</div>
                 <div className="message-time" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                   <button className="provider-badge">{interaction.provider} • {interaction.model}</button>
@@ -1589,7 +1850,7 @@ export default function ChatPanel({
                       opacity: 0.7,
                       transition: 'all 0.2s',
                     }}
-                    title={speakingText === interaction.aiText ? "หยุดอ่านออกเสียง" : "อ่านออกเสียง"}
+                    title={speakingText === interaction.aiText ? "Stop reading" : "Read aloud"}
                   >
                     {renderSpeakerIcon(speakingText === interaction.aiText)}
                   </button>
@@ -1618,6 +1879,19 @@ export default function ChatPanel({
             {renderActiveFileChanges()}
             <div className="message ai-message thinking-message">
               <div className="bubble-wrapper">
+                <ThinkingBlock
+                  blockKey="live"
+                  thoughts={thoughtsFrom(agentProgress)}
+                  isLive={true}
+                  expanded={thinkingExpanded.live ?? true}
+                  onExpandedChange={onThinkingExpandedChange}
+                  showEmptyHint={
+                    agentMode
+                    && hasAgentToolActivity(agentProgress)
+                    && thoughtsFrom(agentProgress).length === 0
+                    && !streamedReply
+                  }
+                />
                 <div className="message-bubble">
                   <span>
                     {streamedReply ? (
@@ -1663,7 +1937,7 @@ export default function ChatPanel({
                           opacity: 0.7,
                           transition: 'all 0.2s',
                         }}
-                        title={speakingText === streamedReply ? "หยุดอ่านออกเสียง" : "อ่านออกเสียง"}
+                        title={speakingText === streamedReply ? "Stop reading" : "Read aloud"}
                       >
                          {renderSpeakerIcon(speakingText === streamedReply)}
                       </button>

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

@@ -56,7 +56,7 @@ export default function DashboardSidebar({
       <div
         className="sidebar-brand clickable"
         onClick={onToggleSidebar}
-        title={sidebarCollapsed ? "ขยายแถบด้านข้าง" : "ยุบแถบด้านข้าง"}
+        title={sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"}
         role="button"
         tabIndex={0}
         onKeyDown={(event) => {