@pheem49/mint 1.16.0 → 1.18.0

package/src/renderer/shared/components/chat/ArtifactCards.tsx

@@ -0,0 +1,238 @@
+import React, { memo, useMemo } from 'react'
+import type { AgentProgress } from '../../types'
+import { detectArtifactType, type ArtifactFile } from '../../utils/artifacts'
+import { setWorkspaceDragData } from '../../utils/workspaceDrag'
+
+export interface ArtifactCardsProps {
+  progress?: AgentProgress[]
+  aiText?: string
+  workspacePath?: string
+  onOpenArtifact?: (artifact: ArtifactFile) => void
+}
+
+interface DetectedArtifact {
+  path: string
+  name: string
+  type: string
+  source: 'ai_text' | 'tool_call'
+}
+
+const PRESENTATION_EXT_RE = /\.(pdf|pptx)$/i
+
+export function extractArtifacts(
+  progress?: AgentProgress[],
+  aiText?: string,
+  workspacePath?: string
+): DetectedArtifact[] {
+  const found = new Map<string, DetectedArtifact>()
+  const normWorkspace = workspacePath ? workspacePath.replace(/\\/g, '/').replace(/\/+$/, '') : ''
+
+  const addPath = (rawPath: string, source: 'ai_text' | 'tool_call') => {
+    let clean = rawPath.trim()
+    // Strip wrapping quotes, markdown code ticks, parentheses, trailing punctuation
+    clean = clean.replace(/^[`"'(<[]+|[`"')>\].,;:]+$/g, '').trim()
+    if (!clean || !PRESENTATION_EXT_RE.test(clean)) return
+    // Ignore URL protocols other than file
+    if (/^https?:\/\//i.test(clean)) return
+    if (clean.startsWith('file://')) clean = clean.slice(7)
+    // Avoid common false positives
+    if (clean.includes('*') || clean.includes('?') || clean.length < 4) return
+
+    clean = clean.replace(/\\/g, '/')
+    const name = clean.split('/').pop() || clean
+    const ext = name.split('.').pop()?.toLowerCase() || ''
+
+    if (['pdf', 'pptx'].includes(ext)) {
+      // Determine workspace-relative path
+      let relativePath = clean
+      if (normWorkspace) {
+        if (clean.startsWith('/')) {
+          if (clean === normWorkspace || clean.startsWith(normWorkspace + '/')) {
+            relativePath = clean.slice(normWorkspace.length + 1)
+          } else {
+            // Absolute path outside current workspace: only keep if matching file name
+            relativePath = name
+          }
+        }
+      } else if (clean.startsWith('/')) {
+        relativePath = name
+      }
+
+      const key = name.toLowerCase()
+      const existing = found.get(key)
+      if (!existing) {
+        found.set(key, {
+          path: relativePath,
+          name,
+          type: ext === 'pdf' ? 'pdf' : 'presentation',
+          source,
+        })
+      } else {
+        // If relativePath has subdirectories, prefer more specific relative path
+        if (relativePath.includes('/') && !existing.path.includes('/')) {
+          found.set(key, {
+            path: relativePath,
+            name,
+            type: existing.type,
+            source,
+          })
+        }
+      }
+    }
+  }
+
+  // Scan aiText for files that Mint explicitly created or referenced
+  if (aiText) {
+    // Match full paths or filenames mentioned in text or markdown code/links
+    const matches = aiText.match(/(?:file:\/\/)?(?:\/[^\s"'`<>]+|[^\s"'`<>]+)\.(?:pdf|pptx)/gi)
+    if (matches) {
+      for (const m of matches) addPath(m, 'ai_text')
+    }
+  }
+
+  return Array.from(found.values())
+}
+
+export const ArtifactCards = memo(function ArtifactCards({
+  progress,
+  aiText,
+  workspacePath,
+  onOpenArtifact,
+}: ArtifactCardsProps) {
+  const artifacts = useMemo(() => extractArtifacts(progress, aiText, workspacePath), [progress, aiText, workspacePath])
+
+  if (artifacts.length === 0) return null
+
+  return (
+    <div
+      className="chat-artifact-cards"
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '8px',
+        margin: '8px 0 12px',
+        width: '100%',
+        boxSizing: 'border-box',
+      }}
+    >
+      {artifacts.map((art) => {
+        const isPdf = art.name.toLowerCase().endsWith('.pdf')
+        const badgeText = isPdf ? 'PDF' : 'PPTX'
+        const badgeColor = isPdf ? '#ef4444' : '#f97316'
+        const badgeBg = isPdf ? 'rgba(239, 68, 68, 0.15)' : 'rgba(249, 115, 22, 0.15)'
+
+        return (
+          <div
+            key={art.path}
+            className="chat-artifact-card"
+            draggable
+            onDragStart={(event) => {
+              setWorkspaceDragData(event.dataTransfer, {
+                path: art.path,
+                root: workspacePath,
+              })
+            }}
+            title={`${art.path} (Drag to chat)`}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              padding: '10px 14px',
+              borderRadius: 'var(--radius-sm, 8px)',
+              background: 'color-mix(in srgb, var(--surface-bg, #1e1e20) 70%, rgba(255, 255, 255, 0.02))',
+              border: '1px solid color-mix(in srgb, var(--border) 60%, transparent)',
+              boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
+              gap: '12px',
+              cursor: 'grab',
+              width: '100%',
+              boxSizing: 'border-box',
+            }}
+          >
+            <div style={{ display: 'flex', alignItems: 'center', gap: '10px', minWidth: 0 }}>
+              <div
+                style={{
+                  width: '36px',
+                  height: '32px',
+                  borderRadius: 'var(--radius-xs, 6px)',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  background: badgeBg,
+                  color: badgeColor,
+                  flexShrink: 0,
+                  fontSize: '11px',
+                  fontWeight: 700,
+                  textTransform: 'uppercase',
+                  letterSpacing: '0.5px',
+                }}
+              >
+                {badgeText}
+              </div>
+              <div style={{ minWidth: 0, display: 'flex', flexDirection: 'column' }}>
+                <span
+                  style={{
+                    fontWeight: 600,
+                    fontSize: '0.85rem',
+                    color: 'var(--text-main, #f4f4f5)',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                  }}
+                  title={art.path}
+                >
+                  {art.name}
+                </span>
+                <span
+                  style={{
+                    fontSize: '0.72rem',
+                    color: 'var(--text-muted, #a1a1aa)',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                  }}
+                >
+                  {isPdf ? 'PDF Presentation / Document' : 'PowerPoint Presentation'} • {art.path}
+                </span>
+              </div>
+            </div>
+
+            {onOpenArtifact && (
+              <button
+                type="button"
+                className="chat-artifact-open-btn"
+                onClick={() =>
+                  onOpenArtifact({
+                    path: art.path,
+                    workspacePath,
+                    type: detectArtifactType(art.path),
+                  })
+                }
+                style={{
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  gap: '6px',
+                  padding: '5px 11px',
+                  borderRadius: 'var(--radius-xs, 6px)',
+                  background: 'color-mix(in srgb, var(--text-main, #ffffff) 6%, transparent)',
+                  color: 'var(--text-main, #f4f4f5)',
+                  fontWeight: 500,
+                  fontSize: '0.76rem',
+                  border: '1px solid var(--border, rgba(255, 255, 255, 0.12))',
+                  cursor: 'pointer',
+                  flexShrink: 0,
+                  transition: 'background 0.15s ease, border-color 0.15s ease',
+                }}
+              >
+                <span>Open in Side Panel</span>
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M5 12h14" />
+                  <path d="m12 5 7 7-7 7" />
+                </svg>
+              </button>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+})

package/src/renderer/shared/components/chat/AttachedDocumentCard.test.tsx

@@ -0,0 +1,39 @@
+/// <reference path="../../env.d.ts" />
+import { describe, it, expect } from 'vitest'
+// @ts-ignore react-dom/server lacks types without @types/react-dom
+import { renderToStaticMarkup } from 'react-dom/server'
+import React from 'react'
+import { AttachedDocumentCard } from './AttachedDocumentCard'
+
+describe('AttachedDocumentCard', () => {
+  it('renders collapsed card header with filename, lines, and View content label', () => {
+    const doc = {
+      filename: 'LICENSE.electron.txt',
+      content: 'Copyright (c) Electron contributors\nPermission is hereby granted.',
+      lineCount: 2,
+      charCount: 65,
+    }
+
+    const html = renderToStaticMarkup(<AttachedDocumentCard document={doc} defaultOpen={false} />)
+    expect(html).toContain('LICENSE.electron.txt')
+    expect(html).toContain('2 lines')
+    expect(html).toContain('View content')
+    // When defaultOpen is false, body is not rendered
+    expect(html).not.toContain('Permission is hereby granted.')
+  })
+
+  it('renders expanded body with full text when defaultOpen is true', () => {
+    const doc = {
+      filename: 'sample.txt',
+      content: 'Hello world from attached file!',
+      lineCount: 1,
+      charCount: 31,
+    }
+
+    const html = renderToStaticMarkup(<AttachedDocumentCard document={doc} defaultOpen={true} />)
+    expect(html).toContain('sample.txt')
+    expect(html).toContain('1 line')
+    expect(html).toContain('Hide content')
+    expect(html).toContain('Hello world from attached file!')
+  })
+})

package/src/renderer/shared/components/chat/AttachedDocumentCard.tsx

@@ -0,0 +1,220 @@
+import React, { memo, useState } from 'react'
+import { materialFileIcon, getExtension } from '../../utils/fileIcons'
+import type { AttachedDocumentPayload } from '../../utils/attachedDocument'
+
+export interface AttachedDocumentCardProps {
+  document: AttachedDocumentPayload
+  defaultOpen?: boolean
+}
+
+export const AttachedDocumentCard = memo(function AttachedDocumentCard({
+  document,
+  defaultOpen = false,
+}: AttachedDocumentCardProps) {
+  const [isOpen, setIsOpen] = useState(defaultOpen)
+  const [isCopied, setIsCopied] = useState(false)
+
+  const extension = getExtension(document.filename)
+  const iconUrl = materialFileIcon(document.filename, extension)
+
+  const handleCopy = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    if (!document.content) return
+    navigator.clipboard.writeText(document.content).then(() => {
+      setIsCopied(true)
+      setTimeout(() => setIsCopied(false), 1500)
+    }).catch(() => {})
+  }
+
+  const lineLabel = `${document.lineCount} ${document.lineCount === 1 ? 'line' : 'lines'}`
+
+  return (
+    <div
+      className="chat-attached-document-card"
+      style={{
+        marginTop: '8px',
+        borderRadius: 'var(--radius-md, 8px)',
+        border: '1px solid color-mix(in srgb, var(--border, rgba(255, 255, 255, 0.15)) 80%, transparent)',
+        background: 'color-mix(in srgb, var(--surface-bg, #18181b) 75%, rgba(0, 0, 0, 0.25))',
+        overflow: 'hidden',
+        boxSizing: 'border-box',
+        width: '100%',
+        maxWidth: '100%',
+        transition: 'border-color 0.15s ease',
+      }}
+    >
+      <div
+        className="chat-attached-document-header"
+        onClick={() => setIsOpen((prev) => !prev)}
+        role="button"
+        tabIndex={0}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault()
+            setIsOpen((prev) => !prev)
+          }
+        }}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          padding: '7px 12px',
+          cursor: 'pointer',
+          userSelect: 'none',
+          gap: '10px',
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', minWidth: 0, flex: 1 }}>
+          {iconUrl ? (
+            <img
+              src={iconUrl}
+              alt=""
+              width="14"
+              height="14"
+              style={{ width: 14, height: 14, flexShrink: 0, objectFit: 'contain' }}
+              aria-hidden="true"
+              draggable={false}
+            />
+          ) : (
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              style={{ color: 'var(--text-muted, #a1a1aa)', flexShrink: 0 }}
+              aria-hidden="true"
+            >
+              <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
+              <polyline points="14 2 14 8 20 8" />
+            </svg>
+          )}
+
+          <span
+            className="chat-attached-document-filename"
+            title={document.filename}
+            style={{
+              fontWeight: 600,
+              fontSize: '0.82rem',
+              color: 'var(--text-main, #f4f4f5)',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {document.filename}
+          </span>
+
+          <span
+            className="chat-attached-document-meta"
+            style={{
+              fontSize: '0.72rem',
+              color: 'var(--text-muted, #a1a1aa)',
+              flexShrink: 0,
+            }}
+          >
+            • {lineLabel}
+          </span>
+        </div>
+
+        <div style={{ display: 'flex', alignItems: 'center', gap: '6px', flexShrink: 0 }}>
+          <button
+            type="button"
+            className="chat-attached-document-copy-btn"
+            onClick={handleCopy}
+            title={isCopied ? 'Copied!' : 'Copy document content'}
+            aria-label={isCopied ? 'Copied' : 'Copy document'}
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: '24px',
+              height: '24px',
+              padding: 0,
+              border: 0,
+              borderRadius: 'var(--radius-xs, 4px)',
+              background: 'transparent',
+              color: isCopied ? 'var(--status-success, #22c55e)' : 'var(--text-muted, #a1a1aa)',
+              cursor: 'pointer',
+              transition: 'color 0.15s ease',
+            }}
+          >
+            {isCopied ? (
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                <polyline points="20 6 9 17 4 12" />
+              </svg>
+            ) : (
+              <svg width="12" height="12" 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>
+
+          <span
+            className="chat-attached-document-toggle-action"
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: '4px',
+              fontSize: '0.74rem',
+              fontWeight: 500,
+              color: 'var(--interactive-fg-hover, #60a5fa)',
+            }}
+          >
+            <span>{isOpen ? 'Hide content' : 'View content'}</span>
+            <svg
+              width="11"
+              height="11"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              style={{
+                transform: isOpen ? 'rotate(180deg)' : 'none',
+                transition: 'transform 0.18s ease',
+              }}
+              aria-hidden="true"
+            >
+              <polyline points="6 9 12 15 18 9" />
+            </svg>
+          </span>
+        </div>
+      </div>
+
+      {isOpen && (
+        <div
+          className="chat-attached-document-body"
+          style={{
+            borderTop: '1px solid color-mix(in srgb, var(--border, rgba(255, 255, 255, 0.1)) 60%, transparent)',
+            background: 'rgba(0, 0, 0, 0.22)',
+            padding: '8px 12px',
+            maxHeight: '260px',
+            overflowY: 'auto',
+          }}
+        >
+          <pre
+            style={{
+              margin: 0,
+              fontFamily: 'var(--font-mono, monospace)',
+              fontSize: '0.78rem',
+              lineHeight: 1.45,
+              whiteSpace: 'pre-wrap',
+              wordBreak: 'break-word',
+              color: 'var(--text-main, #e4e4e7)',
+            }}
+          >
+            {document.content}
+          </pre>
+        </div>
+      )}
+    </div>
+  )
+})
+
+export default AttachedDocumentCard

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

@@ -0,0 +1,33 @@
+import { describe, expect, it } from 'vitest'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { ChatCodeBlock } from './ChatCodeBlock'
+
+describe('ChatCodeBlock', () => {
+  it('hides line numbers for short snippets of 5 lines or fewer', () => {
+    const code5Lines = [
+      '# ImageMagick snippet',
+      'mkdir -p optimized',
+      'for img in *.jpg; do',
+      '  convert "$img" -resize 2000x "$img"',
+      'done',
+    ].join('\n')
+
+    const markup = renderToStaticMarkup(<ChatCodeBlock code={code5Lines} language="bash" />)
+    expect(markup).not.toContain('chat-code-line-num')
+  })
+
+  it('shows line numbers for longer code blocks with more than 5 lines', () => {
+    const code6Lines = [
+      'def fn():',
+      '    line1 = 1',
+      '    line2 = 2',
+      '    line3 = 3',
+      '    line4 = 4',
+      '    return line1 + line4',
+    ].join('\n')
+
+    const markup = renderToStaticMarkup(<ChatCodeBlock code={code6Lines} language="python" />)
+    expect(markup).toContain('chat-code-line-num')
+    expect(markup).toContain('chat-code-toggle-lines-btn')
+  })
+})

package/src/renderer/shared/components/{ChatCodeBlock.tsx → chat/ChatCodeBlock.tsx}

@@ -4,7 +4,7 @@
  * Shared by both Desktop and Web ChatPanel — do NOT duplicate this.
  */
 import { memo, useState, useMemo } from 'react'
-import { renderHighlightedCode } from '../utils/syntaxHighlight'
+import { renderHighlightedCode } from '../../utils/syntaxHighlight'
 
 interface Props {
   code: string
@@ -48,7 +48,11 @@ export const ChatCodeBlock = memo(function ChatCodeBlock({ code, language }: Pro
     return code.split('\n').length
   }, [code])
 
-  const showLineNumbers = lineCount > 1
+  // Hide line numbers for short commands / snippets (5 lines or fewer).
+  // For longer code blocks (> 5 lines), show line numbers by default with optional toggle.
+  const isShortSnippet = lineCount <= 5
+  const [toggleLineNumbers, setToggleLineNumbers] = useState<boolean | null>(null)
+  const showLineNumbers = toggleLineNumbers !== null ? toggleLineNumbers : !isShortSnippet
   const highlightedCode = useMemo(
     () => renderHighlightedCode(code, cleanLang, showLineNumbers),
     [code, cleanLang, showLineNumbers],
@@ -64,6 +68,16 @@ export const ChatCodeBlock = memo(function ChatCodeBlock({ code, language }: Pro
           )}
         </div>
         <div className="chat-code-block-actions">
+          {lineCount > 5 && (
+            <button
+              type="button"
+              onClick={() => setToggleLineNumbers(prev => (prev !== null ? !prev : false))}
+              title={showLineNumbers ? 'Hide line numbers' : 'Show line numbers'}
+              className={`chat-code-action-btn chat-code-toggle-lines-btn ${showLineNumbers ? 'is-active' : ''}`}
+            >
+              <span className="chat-code-btn-label">#</span>
+            </button>
+          )}
           <button
             type="button"
             onClick={handleDownload}