@pheem49/mint 1.6.2 → 1.6.4

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

@@ -260,6 +260,64 @@ function renderApprovalDetails(approval: any): ApprovalDetails {
   return { title: 'Unknown Action', body: JSON.stringify(approval, null, 2), reason: 'Requires approval to proceed.', isDangerous: false }
 }
 
+function renderDiff(diffText: string) {
+  if (!diffText) return null
+  const lines = diffText.split('\n')
+  return (
+    <div style={{ 
+      background: '#0b0f19', 
+      borderRadius: '6px', 
+      padding: '8px', 
+      border: '1px solid rgba(255, 255, 255, 0.08)', 
+      overflowX: 'auto', 
+      maxHeight: '400px',
+      fontFamily: 'monospace',
+      fontSize: '0.74rem',
+      lineHeight: '1.4',
+    }}>
+      {lines.map((line, idx) => {
+        let style: any = {
+          whiteSpace: 'pre-wrap',
+          padding: '2px 6px',
+        }
+        
+        if (line.startsWith('@@') || line.startsWith('---') || line.startsWith('+++')) {
+          style = {
+            ...style,
+            color: '#64748b',
+            fontWeight: 'bold',
+          }
+        } else if (line.startsWith('+')) {
+          style = {
+            ...style,
+            background: 'rgba(16, 185, 129, 0.12)',
+            borderLeft: '3px solid #10b981',
+            color: '#a7f3d0'
+          }
+        } else if (line.startsWith('-')) {
+          style = {
+            ...style,
+            background: 'rgba(239, 68, 68, 0.12)',
+            borderLeft: '3px solid #ef4444',
+            color: '#fca5a5'
+          }
+        } else {
+          style = {
+            ...style,
+            color: '#e2e8f0',
+          }
+        }
+        
+        return (
+          <div key={idx} style={style}>
+            {line}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
 interface ChatPanelProps {
   interactions: any[]
   sending: boolean
@@ -298,55 +356,171 @@ interface ChatPanelProps {
   onSetModel: (model: string) => void
 }
 
+function ChatCodeBlock({ code, language }: { code: string; language: string; key?: any }) {
+  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
+      link.download = `code.${language === 'plaintext' ? 'txt' : language}`
+      link.click()
+      URL.revokeObjectURL(url)
+    } catch (err) {
+      console.error('Failed to download code: ', err)
+    }
+  }
+
+  const displayLang = language.charAt(0).toUpperCase() + language.slice(1).toLowerCase()
+
+  return (
+    <div className="chat-code-block-container" style={{ whiteSpace: 'normal' }}>
+      <div className="chat-code-block-header">
+        <span className="chat-code-block-lang">{displayLang}</span>
+        <div className="chat-code-block-actions">
+          <button type="button" onClick={handleDownload} title="Download code" className="chat-code-action-btn">
+            <svg width="14" height="14" 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">
+            {copied ? (
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
+                <polyline points="20 6 9 17 4 12" />
+              </svg>
+            ) : (
+              <svg width="14" height="14" 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>
+            )}
+          </button>
+        </div>
+      </div>
+      <pre className="chat-code-block-body">
+        <code>{code}</code>
+      </pre>
+    </div>
+  )
+}
+
 function renderFormattedMessage(text: string) {
   const displayText = readableAssistantText(text)
   if (!displayText) return null
-  
-  const lines = displayText.split('\n')
-  return lines.map((line, lineIndex) => {
-    const headerMatch = line.match(/^(#{1,6})\s+(.*)$/)
-    
-    const formatInline = (str: string) => {
-      const parts = str.split(/\*\*([\s\S]*?)\*\*/g)
-      return parts.map((part, partIndex) => {
-        if (partIndex % 2 === 1) {
+
+  const formatInline = (str: string) => {
+    const codeParts = str.split(/`([\s\S]*?)`/g)
+    return codeParts.map((codePart, codeIndex) => {
+      if (codeIndex % 2 === 1) {
+        return (
+          <code key={`code-${codeIndex}`} className="chat-inline-code">
+            {codePart}
+          </code>
+        )
+      }
+      const boldParts = codePart.split(/\*\*([\s\S]*?)\*\*/g)
+      return boldParts.map((boldPart, boldIndex) => {
+        if (boldIndex % 2 === 1) {
           return (
-            <strong key={partIndex} className="chat-bold-highlight">
-              {part}
+            <strong key={`bold-${boldIndex}`} className="chat-bold-highlight">
+              {boldPart}
             </strong>
           )
         }
-        return part
+        return boldPart
       })
+    })
+  }
+
+  const lines = displayText.split('\n')
+  const items: any[] = []
+
+  let inCodeBlock = false
+  let codeBlockLang = ''
+  let codeBlockLines: string[] = []
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i]
+
+    if (line.trim().startsWith('```')) {
+      if (inCodeBlock) {
+        const codeText = codeBlockLines.join('\n')
+        items.push(
+          <ChatCodeBlock
+            key={`code-block-${i}`}
+            code={codeText}
+            language={codeBlockLang}
+          />
+        )
+        inCodeBlock = false
+        codeBlockLines = []
+      } else {
+        inCodeBlock = true
+        codeBlockLang = line.trim().slice(3).trim() || 'plaintext'
+      }
+      continue
     }
 
+    if (inCodeBlock) {
+      codeBlockLines.push(line)
+      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)'
+        color: 'var(--text-main)',
       }
-      
-      return (
-        <span key={lineIndex} style={style}>
+
+      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>
+      )
     }
+  }
 
-    return (
-      <Fragment key={lineIndex}>
-        {formatInline(line)}
-        {lineIndex < lines.length - 1 && '\n'}
-      </Fragment>
+  if (inCodeBlock && codeBlockLines.length > 0) {
+    const codeText = codeBlockLines.join('\n')
+    items.push(
+      <ChatCodeBlock
+        key={`code-block-end`}
+        code={codeText}
+        language={codeBlockLang}
+      />
     )
-  })
+  }
+
+  return items
 }
 
 function readableAssistantText(text: string) {
@@ -607,6 +781,25 @@ export default function ChatPanel({
   }
   const activeModel = getActiveModel(activeProvider)
 
+  const [elapsedSeconds, setElapsedSeconds] = useState(0)
+
+  useEffect(() => {
+    if (!sending) {
+      setElapsedSeconds(0)
+      return
+    }
+
+    const startTime = Date.now()
+    setElapsedSeconds(0)
+
+    const timer = setInterval(() => {
+      const elapsed = Math.round((Date.now() - startTime) / 1000)
+      setElapsedSeconds(elapsed)
+    }, 1000)
+
+    return () => clearInterval(timer)
+  }, [sending])
+
   const [isRecording, setIsRecording] = useState(false)
   const [voiceMode, setVoiceMode] = useState(false)
   const [voiceTranscript, setVoiceTranscript] = useState('')
@@ -1319,7 +1512,7 @@ export default function ChatPanel({
         </button>
         <div className="chat-header-title">
           <img src="./assets/icon.png" alt="Logo" className="chat-header-logo" />
-          <span>Agent Mint</span>
+          <span>Mint Agent</span>
         </div>
       </div>
 
@@ -1425,7 +1618,30 @@ export default function ChatPanel({
             {renderActiveFileChanges()}
             <div className="message ai-message thinking-message">
               <div className="bubble-wrapper">
-                <div className="message-bubble"><span>{streamedReply ? renderFormattedMessage(streamedReply) : 'Thinking...'}</span></div>
+                <div className="message-bubble">
+                  <span>
+                    {streamedReply ? (
+                      renderFormattedMessage(streamedReply)
+                    ) : (
+                      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: 'var(--text-soft, #94a3b8)' }}>
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" style={{ display: 'inline-block', flexShrink: 0 }}>
+                          <circle cx="12" cy="12" r="10" stroke="rgba(255, 255, 255, 0.12)" />
+                          <path d="M12 2a10 10 0 0 1 10 10" stroke="var(--accent)" strokeLinecap="round">
+                            <animateTransform
+                              attributeName="transform"
+                              type="rotate"
+                              from="0 12 12"
+                              to="360 12 12"
+                              dur="0.9s"
+                              repeatCount="indefinite"
+                            />
+                          </path>
+                        </svg>
+                        <span>Thinking for {elapsedSeconds}s</span>
+                      </div>
+                    )}
+                  </span>
+                </div>
                 {streamedResponse && (
                   <div className="message-time" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                     <button className="provider-badge">{badge(streamedResponse.provider, streamedResponse.model)}</button>
@@ -1459,6 +1675,38 @@ export default function ChatPanel({
           </div>
         )}
 
+        {pendingApproval && (() => {
+          const details = renderApprovalDetails(pendingApproval.approval)
+          const writeFile = pendingApproval.approval?.WriteFile
+          const applyPatch = pendingApproval.approval?.ApplyPatch
+          const diffText = writeFile?.diff || applyPatch?.diff
+
+          return (
+            <div className="message ai-message" style={{ width: '100%' }}>
+              <div className="bubble-wrapper" style={{ width: '100%' }}>
+                <div className="action-card approval-card" data-tier={details.isDangerous ? 'dangerous' : undefined} style={{ width: '100%' }}>
+                  <div className="approval-card-content" style={{ width: '100%' }}>
+                    <div className="approval-card-title">{details.title}</div>
+                    <div className="approval-card-body" style={{ whiteSpace: 'pre-wrap', fontFamily: 'monospace' }}>{details.body}</div>
+                    {diffText ? (
+                      <div className="approval-card-diff-container" style={{ marginTop: '8px', width: '100%' }}>
+                        <div style={{ fontSize: '0.8rem', fontWeight: 600, color: 'var(--text-soft, #94a3b8)', marginBottom: '4px' }}>Diff:</div>
+                        {renderDiff(diffText)}
+                      </div>
+                    ) : (
+                      details.reason && <div className="approval-card-reason" style={{ whiteSpace: 'pre-wrap', fontFamily: 'monospace' }}>{details.reason}</div>
+                    )}
+                  </div>
+                  <div className="approval-card-actions">
+                    <button type="button" className="approval-btn approval-btn-approve" onClick={() => onApproval(true)}>Approve</button>
+                    <button type="button" className="approval-btn" style={{ backgroundColor: 'rgba(16, 185, 129, 0.22)', borderColor: 'rgba(16, 185, 129, 0.4)', color: '#a7f3d0' }} onClick={() => onApproval(true, true)}>Approve this session</button>
+                    <button type="button" className="approval-btn approval-btn-cancel" onClick={() => onApproval(false)}>Cancel</button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )
+        })()}
         <div ref={chatEnd} />
       </div>
 

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

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 
-export type DashboardView = 'chat' | 'pictures' | 'model'
+export type DashboardView = 'chat' | 'pictures' | 'model' | 'imagine'
 
 interface ChatSessionItem {
   id: string
@@ -63,8 +63,8 @@ export default function DashboardSidebar({
           if (event.key === 'Enter' || event.key === ' ') onToggleSidebar()
         }}
       >
-        <img src="./assets/icon.png" alt="Agent Mint Logo" className="sidebar-logo" />
-        <span className="sidebar-brand-name">Agent Mint</span>
+        <img src="./assets/icon.png" alt="Mint Agent Logo" className="sidebar-logo" />
+        <span className="sidebar-brand-name">Mint Agent</span>
       </div>
 
       <button className="sidebar-new-chat" onClick={() => onClearHistory('New chat')}>
@@ -95,6 +95,14 @@ export default function DashboardSidebar({
         </span>
         <span>Pictures</span>
       </button>
+      <button className={`sidebar-top-action ${view === 'imagine' ? 'is-active' : ''}`} onClick={() => onSetView('imagine')}>
+        <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+            <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
+          </svg>
+        </span>
+        <span>Image Studio</span>
+      </button>
 
       <div className="sidebar-section">
         <div className="sidebar-section-title">Conversation CLI</div>