clawport-ui 0.1.0

package/components/chat/FileAttachment.tsx

@@ -0,0 +1,140 @@
+'use client'
+import React from 'react'
+
+interface FileAttachmentProps {
+  name: string
+  size?: number
+  mimeType?: string
+  url: string
+  isUser: boolean
+}
+
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+}
+
+function fileIcon(mimeType?: string, name?: string): React.ReactNode {
+  const ext = name?.split('.').pop()?.toLowerCase() || ''
+  const isPdf = mimeType === 'application/pdf' || ext === 'pdf'
+  const isDoc = ['doc', 'docx'].includes(ext) || mimeType?.includes('wordprocessingml')
+  const isText = ['txt', 'csv', 'json', 'md'].includes(ext) || mimeType?.startsWith('text/')
+  const isArchive = ['zip', 'tar', 'gz', 'rar', '7z'].includes(ext)
+
+  if (isPdf) return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+      <polyline points="14 2 14 8 20 8" />
+      <line x1="9" y1="15" x2="15" y2="15" />
+    </svg>
+  )
+  if (isDoc) return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+      <polyline points="14 2 14 8 20 8" />
+      <line x1="16" y1="13" x2="8" y2="13" />
+      <line x1="16" y1="17" x2="8" y2="17" />
+      <polyline points="10 9 9 9 8 9" />
+    </svg>
+  )
+  if (isText) return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+      <polyline points="14 2 14 8 20 8" />
+    </svg>
+  )
+  if (isArchive) return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M21 8v13H3V8" />
+      <path d="M1 3h22v5H1z" />
+      <path d="M10 12h4" />
+    </svg>
+  )
+  // Generic file
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" />
+      <polyline points="13 2 13 9 20 9" />
+    </svg>
+  )
+}
+
+export function FileAttachment({ name, size, mimeType, url, isUser }: FileAttachmentProps) {
+  return (
+    <div style={{
+      display: 'flex',
+      alignItems: 'center',
+      gap: 'var(--space-3)',
+      padding: 'var(--space-3) var(--space-4)',
+      borderRadius: 'var(--radius-lg)',
+      background: isUser ? 'var(--accent)' : 'var(--material-thin)',
+      border: isUser ? 'none' : '1px solid var(--separator)',
+      maxWidth: 280,
+      minWidth: 180,
+    }}>
+      {/* File icon */}
+      <div style={{
+        width: 36,
+        height: 36,
+        borderRadius: 'var(--radius-sm)',
+        background: isUser ? 'rgba(0,0,0,0.15)' : 'var(--fill-tertiary)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexShrink: 0,
+        color: isUser ? '#000' : 'var(--text-secondary)',
+      }}>
+        {fileIcon(mimeType, name)}
+      </div>
+
+      {/* Name + size */}
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div style={{
+          fontSize: 'var(--text-footnote)',
+          fontWeight: 'var(--weight-medium)',
+          color: isUser ? '#000' : 'var(--text-primary)',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+        }}>
+          {name}
+        </div>
+        {size != null && (
+          <div style={{
+            fontSize: 'var(--text-caption2)',
+            color: isUser ? 'rgba(0,0,0,0.5)' : 'var(--text-tertiary)',
+            marginTop: 1,
+          }}>
+            {formatFileSize(size)}
+          </div>
+        )}
+      </div>
+
+      {/* Download button */}
+      <a
+        href={url}
+        download={name}
+        aria-label={`Download ${name}`}
+        style={{
+          width: 28,
+          height: 28,
+          borderRadius: '50%',
+          background: isUser ? 'rgba(0,0,0,0.15)' : 'var(--fill-secondary)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexShrink: 0,
+          color: isUser ? '#000' : 'var(--text-secondary)',
+          textDecoration: 'none',
+        }}
+      >
+        <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>
+      </a>
+    </div>
+  )
+}

package/components/chat/MediaPreview.tsx

@@ -0,0 +1,111 @@
+'use client'
+import React from 'react'
+import type { MediaAttachment } from '@/lib/conversations'
+
+interface MediaPreviewProps {
+  attachments: MediaAttachment[]
+  onRemove: (index: number) => void
+}
+
+export function MediaPreview({ attachments, onRemove }: MediaPreviewProps) {
+  if (attachments.length === 0) return null
+
+  return (
+    <div style={{
+      display: 'flex',
+      gap: 'var(--space-2)',
+      padding: 'var(--space-2) var(--space-3)',
+      overflowX: 'auto',
+      overflowY: 'hidden',
+    }}>
+      {attachments.map((att, i) => (
+        <div key={i} style={{
+          position: 'relative',
+          width: 56,
+          height: 56,
+          flexShrink: 0,
+          borderRadius: 'var(--radius-sm)',
+          overflow: 'hidden',
+          background: 'var(--fill-tertiary)',
+          border: '1px solid var(--separator)',
+        }}>
+          {att.type === 'image' ? (
+            <img
+              src={att.url}
+              alt={att.name || 'Preview'}
+              style={{
+                width: '100%',
+                height: '100%',
+                objectFit: 'cover',
+              }}
+            />
+          ) : (
+            <div style={{
+              width: '100%',
+              height: '100%',
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: 2,
+              padding: 4,
+            }}>
+              {att.type === 'audio' ? (
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--text-tertiary)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M9 18V5l12-2v13" />
+                  <circle cx="6" cy="18" r="3" />
+                  <circle cx="18" cy="16" r="3" />
+                </svg>
+              ) : (
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--text-tertiary)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" />
+                  <polyline points="13 2 13 9 20 9" />
+                </svg>
+              )}
+              <span style={{
+                fontSize: 8,
+                color: 'var(--text-quaternary)',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+                maxWidth: '100%',
+                textAlign: 'center',
+              }}>
+                {att.name?.split('.').pop()?.toUpperCase() || att.type.toUpperCase()}
+              </span>
+            </div>
+          )}
+
+          {/* Remove button */}
+          <button
+            onClick={() => onRemove(i)}
+            aria-label="Remove attachment"
+            style={{
+              position: 'absolute',
+              top: 2,
+              right: 2,
+              width: 18,
+              height: 18,
+              borderRadius: '50%',
+              background: 'rgba(0,0,0,0.6)',
+              border: 'none',
+              cursor: 'pointer',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              color: '#fff',
+              fontSize: 11,
+              lineHeight: 1,
+              padding: 0,
+            }}
+          >
+            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round">
+              <line x1="18" y1="6" x2="6" y2="18" />
+              <line x1="6" y1="6" x2="18" y2="18" />
+            </svg>
+          </button>
+        </div>
+      ))}
+    </div>
+  )
+}

package/components/chat/VoiceMessage.tsx

@@ -0,0 +1,139 @@
+'use client'
+import React, { useEffect, useRef, useState, useCallback } from 'react'
+import { formatDuration } from '@/lib/audio-recorder'
+
+interface VoiceMessageProps {
+  src: string
+  duration: number
+  waveform: number[]
+  isUser: boolean
+}
+
+export function VoiceMessage({ src, duration, waveform, isUser }: VoiceMessageProps) {
+  const audioRef = useRef<HTMLAudioElement | null>(null)
+  const [playing, setPlaying] = useState(false)
+  const [progress, setProgress] = useState(0) // 0-1
+  const [currentTime, setCurrentTime] = useState(0)
+
+  useEffect(() => {
+    const audio = new Audio(src)
+    audioRef.current = audio
+
+    audio.addEventListener('timeupdate', () => {
+      if (audio.duration && isFinite(audio.duration)) {
+        setProgress(audio.currentTime / audio.duration)
+        setCurrentTime(audio.currentTime)
+      }
+    })
+    audio.addEventListener('ended', () => {
+      setPlaying(false)
+      setProgress(0)
+      setCurrentTime(0)
+    })
+    audio.addEventListener('pause', () => setPlaying(false))
+    audio.addEventListener('play', () => setPlaying(true))
+
+    return () => {
+      audio.pause()
+      audio.src = ''
+    }
+  }, [src])
+
+  const toggle = useCallback(() => {
+    const audio = audioRef.current
+    if (!audio) return
+    if (playing) {
+      audio.pause()
+    } else {
+      audio.play().catch(() => {})
+    }
+  }, [playing])
+
+  const bars = waveform.length > 0 ? waveform : Array(50).fill(0.1)
+  const displayTime = playing ? currentTime : duration
+
+  return (
+    <div style={{
+      display: 'flex',
+      alignItems: 'center',
+      gap: 'var(--space-3)',
+      padding: 'var(--space-3) var(--space-4)',
+      borderRadius: 'var(--radius-lg)',
+      background: isUser ? 'var(--accent)' : 'var(--material-thin)',
+      border: isUser ? 'none' : '1px solid var(--separator)',
+      maxWidth: 280,
+      minWidth: 200,
+    }}>
+      {/* Play/Pause button */}
+      <button
+        onClick={toggle}
+        aria-label={playing ? 'Pause' : 'Play'}
+        style={{
+          width: 28,
+          height: 28,
+          borderRadius: '50%',
+          background: isUser ? 'rgba(0,0,0,0.2)' : 'var(--fill-secondary)',
+          border: 'none',
+          cursor: 'pointer',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexShrink: 0,
+          color: isUser ? '#000' : 'var(--text-primary)',
+        }}
+      >
+        {playing ? (
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
+            <rect x="6" y="4" width="4" height="16" rx="1" />
+            <rect x="14" y="4" width="4" height="16" rx="1" />
+          </svg>
+        ) : (
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
+            <polygon points="6,4 20,12 6,20" />
+          </svg>
+        )}
+      </button>
+
+      {/* Waveform bars */}
+      <div style={{
+        flex: 1,
+        display: 'flex',
+        alignItems: 'center',
+        gap: 2,
+        height: 28,
+      }}>
+        {bars.map((amp, i) => {
+          const barProgress = i / bars.length
+          const isPlayed = barProgress <= progress
+          return (
+            <div
+              key={i}
+              style={{
+                width: 3,
+                borderRadius: 1.5,
+                height: `${Math.max(4, amp * 24)}px`,
+                background: isUser
+                  ? (isPlayed ? 'rgba(0,0,0,0.7)' : 'rgba(0,0,0,0.25)')
+                  : (isPlayed ? 'var(--accent)' : 'var(--fill-primary)'),
+                transition: 'background 100ms ease',
+                flexShrink: 0,
+              }}
+            />
+          )
+        })}
+      </div>
+
+      {/* Duration label */}
+      <span style={{
+        fontSize: 'var(--text-caption2)',
+        color: isUser ? 'rgba(0,0,0,0.6)' : 'var(--text-tertiary)',
+        fontVariantNumeric: 'tabular-nums',
+        flexShrink: 0,
+        minWidth: 28,
+        textAlign: 'right',
+      }}>
+        {formatDuration(displayTime)}
+      </span>
+    </div>
+  )
+}