@pheem49/mint 1.6.4 → 1.7.0

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

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState, Fragment, type ChangeEvent, type ClipboardEvent, type DragEvent, type FormEvent, type KeyboardEvent, type RefObject } 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
@@ -419,6 +422,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
@@ -447,6 +455,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[] = []
 
@@ -454,10 +569,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(
@@ -481,35 +610,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(
@@ -524,6 +678,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()
@@ -693,6 +939,8 @@ export default function ChatPanel({
   streamedResponse,
   agentProgress,
   agentActivitySnapshots,
+  thinkingExpanded,
+  onThinkingExpandedChange,
   message,
   imageAttachments,
   documentName,
@@ -770,7 +1018,7 @@ export default function ChatPanel({
   const canSubmit = Boolean(message.trim() || imageAttachments.length > 0 || documentName)
   const sendingImageMarkers = Array.from({ length: sendingImageCount }, (_, index) => `[Image #${index + 1}]`).join(' ')
   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 getAvailableModels = (provider: string) => {
     switch (provider) {
@@ -954,7 +1202,7 @@ export default function ChatPanel({
   }
   const startAudioRecording = async (autoSend: boolean) => {
     if (!navigator.mediaDevices?.getUserMedia || typeof MediaRecorder === 'undefined') {
-      alert('ขออภัย ระบบนี้ไม่สามารถเข้าถึงไมค์หรืออัดเสียงใน WebView นี้ได้')
+      alert('Sorry, this system cannot access the microphone or record audio in this WebView')
       voiceModeRef.current = false
       setVoiceMode(false)
       return
@@ -977,7 +1225,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)
@@ -992,13 +1240,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)
@@ -1022,7 +1270,7 @@ export default function ChatPanel({
         if (peak > 12) {
           heardVoice = true
           quietSince = 0
-          setVoiceTranscript('กำลังฟัง...')
+          setVoiceTranscript('Listening...')
         } else if (heardVoice) {
           quietSince = quietSince || now
         }
@@ -1037,7 +1285,7 @@ export default function ChatPanel({
       setIsRecording(false)
       voiceModeRef.current = false
       setVoiceMode(false)
-      alert('เปิดไมค์ไม่สำเร็จ กรุณาตรวจสิทธิ์ microphone ของแอป')
+      alert('Failed to open microphone. Please check microphone permissions for this app')
     }
   }
   const startRecognition = (autoSend: boolean) => {
@@ -1472,6 +1720,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>
@@ -1481,7 +1742,7 @@ export default function ChatPanel({
                     type="button"
                     className={`tts-btn ${speakingText === interaction.aiText ? 'is-speaking' : ''}`}
                     onClick={() => speak(interaction.aiText)}
-                    title={speakingText === interaction.aiText ? 'หยุดอ่านออกเสียง' : 'อ่านออกเสียง'}
+                    title={speakingText === interaction.aiText ? 'Stop reading' : 'Read aloud'}
                   >
                     {renderSpeakerIcon(speakingText === interaction.aiText)}
                   </button>
@@ -1510,6 +1771,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 ? (
@@ -1543,7 +1817,7 @@ export default function ChatPanel({
                         type="button"
                         className={`tts-btn ${speakingText === streamedReply ? 'is-speaking' : ''}`}
                         onClick={() => speak(streamedReply)}
-                        title={speakingText === streamedReply ? 'หยุดอ่านออกเสียง' : 'อ่านออกเสียง'}
+                        title={speakingText === streamedReply ? 'Stop reading' : 'Read aloud'}
                       >
                         {renderSpeakerIcon(speakingText === streamedReply)}
                       </button>
@@ -1795,7 +2069,7 @@ export default function ChatPanel({
             className={`${isRecording ? 'is-recording' : ''} ${voiceMode ? 'voice-mode-active' : ''}`}
             type="button"
             onClick={toggleRecording}
-            title={voiceMode ? 'ปิดโหมดสนทนาเสียง' : 'เปิดโหมดสนทนาเสียง'}
+            title={voiceMode ? 'Disable voice conversation' : 'Enable voice conversation'}
             style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}
           >
             {isRecording ? (

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

@@ -73,13 +73,13 @@ export default function DashboardSidebar({
   const toggleInteractionGuide = () => {
     const next = !showInteractionGuide
     onSetShowInteractionGuide(next)
-    onShowToast(next ? 'เปิดการแสดงจุดสัมผัส (Interaction Zones) ⊹' : 'ปิดการแสดงจุดสัมผัส ⊹')
+    onShowToast(next ? 'Show interaction zones ⊹' : 'Hide interaction zones ⊹')
   }
 
   const toggleInteraction = () => {
     const next = !interactionEnabled
     onSetInteractionEnabled(next)
-    onShowToast(next ? 'เปิดการโต้ตอบกับโมเดล ⦸' : 'ปิดการโต้ตอบกับโมเดล ⦸')
+    onShowToast(next ? 'Enable model interaction ⦸' : 'Disable model interaction ⦸')
   }
 
   const conversationSessions = chatSessions.filter((session) => session.kind !== 'cli' && session.id !== 'conversation-default')
@@ -94,7 +94,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) => {