@pheem49/mint 1.9.0 → 1.10.0

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

@@ -12,11 +12,12 @@ import {
 } from '../../shared/constants/models'
 import { badge, providerLabel, fallbackNotice } from '../../shared/utils/providers'
 import { activitiesFrom, parseWebSearchSources, type AgentActivity, type AgentActivityView } from '../../shared/utils/agentActivity'
+import { SLASH_COMMANDS } from '../../shared/constants/slashCommands'
 import { AgentActivityTable } from '../../shared/components/AgentActivityTable'
 import { ChatCodeBlock } from '../../shared/components/ChatCodeBlock'
 import { renderApprovalDetails, renderDiff, type ApprovalDetails } from '../../shared/utils/approval'
 import { ApprovalCard } from '../../shared/components/ApprovalCard'
-import { renderFormattedMessage, readableAssistantText, cleanSpeechText, renderSpeakerIcon } from '../../shared/utils/markdown'
+import { renderFormattedMessage, readableAssistantText, cleanSpeechText, renderSpeakerIcon, renderCopyIcon } from '../../shared/utils/markdown'
 import { ThinkingBlock } from '../../shared/components/ThinkingBlock'
 import { AgentActivityDrawer } from '../../shared/components/AgentActivityDrawer'
 import type { DiffHunk, FileChange } from '../../shared/types'
@@ -26,6 +27,8 @@ import { useSpeechToText } from '../../shared/utils/speech'
 
 
 import {
+  listLearnedSkills,
+  type LearnedSkill,
   type AgentProgress,
   type ChatResponse,
   type RuntimeStatus,
@@ -38,6 +41,7 @@ interface ChatPanelProps {
   sending: boolean
   sendingMessage: string
   sendingImageCount: number
+  sendingVideoCount?: number
   streamedReply: string
   streamedResponse: ChatResponse | null
   agentProgress: AgentProgress[]
@@ -46,6 +50,7 @@ interface ChatPanelProps {
   onThinkingExpandedChange: (key: string, open: boolean) => void
   message: string
   imageAttachments: Array<{ dataUri: string; name: string; previewDataUri?: string }>
+  videoAttachments: Array<{ dataUri: string; name: string }>
   documentName: string
   pendingApproval: any | null
   smartContext: boolean
@@ -55,11 +60,13 @@ interface ChatPanelProps {
   welcomeInteraction: any
   onSubmit: (event: FormEvent<HTMLFormElement>) => void
   onSelectImage: (event: ChangeEvent<HTMLInputElement>) => void
+  onSelectVideo: (event: ChangeEvent<HTMLInputElement>) => void
   onSelectDocument: (event: ChangeEvent<HTMLInputElement>) => void
   onPasteImage: (clipboardData: DataTransfer) => boolean
   onSetMessage: (message: string) => void
   onSendVoiceMessage: (message: string, audioDataUri?: string | null) => Promise<void>
   onRemoveImage: (idx: number) => void
+  onRemoveVideo: (idx: number) => void
   onRemoveDocument: () => void
   onStartWebSearch: () => void
   onCaptureScreen: () => void
@@ -79,6 +86,7 @@ export default function ChatPanel({
   sending,
   sendingMessage,
   sendingImageCount,
+  sendingVideoCount,
   streamedReply,
   streamedResponse,
   agentProgress,
@@ -87,6 +95,7 @@ export default function ChatPanel({
   onThinkingExpandedChange,
   message,
   imageAttachments,
+  videoAttachments,
   documentName,
   pendingApproval,
   smartContext,
@@ -96,11 +105,13 @@ export default function ChatPanel({
   welcomeInteraction,
   onSubmit,
   onSelectImage,
+  onSelectVideo,
   onSelectDocument,
   onPasteImage,
   onSetMessage,
   onSendVoiceMessage,
   onRemoveImage,
+  onRemoveVideo,
   onRemoveDocument,
   onStartWebSearch,
   onCaptureScreen,
@@ -150,8 +161,9 @@ export default function ChatPanel({
     }
     fetchOllamaModels();
   }, [status?.activeProvider, settingsConfig?.ollamaHost])
-  const canSubmit = Boolean(message.trim() || imageAttachments.length > 0 || documentName)
+  const canSubmit = Boolean(message.trim() || imageAttachments.length > 0 || videoAttachments.length > 0 || documentName)
   const sendingImageMarkers = Array.from({ length: sendingImageCount }, (_, index) => `[Image #${index + 1}]`).join(' ')
+  const sendingVideoMarkers = Array.from({ length: sendingVideoCount || 0 }, (_, index) => `[Video #${index + 1}]`).join(' ')
 
   const getAvailableModels = (provider: string) => {
     switch (provider) {
@@ -234,6 +246,22 @@ export default function ChatPanel({
   }, [sending])
 
   const [speakingText, setSpeakingText] = useState<string | null>(null)
+  const [copiedId, setCopiedId] = useState<string | number | null>(null)
+
+  const handleCopyMessage = async (id: string | number, text: string) => {
+    try {
+      const cleanText = readableAssistantText(text) || text
+      await navigator.clipboard.writeText(cleanText)
+      setCopiedId(id)
+      setTimeout(() => {
+        setCopiedId((current) => (current === id ? null : current))
+      }, 2000)
+    } catch (err) {
+      console.error('Failed to copy message:', err)
+    }
+  }
+
+
   const audioRef = useRef<HTMLAudioElement | null>(null)
   const speechRunRef = useRef(0)
   const historyReadyRef = useRef(false)
@@ -437,6 +465,15 @@ export default function ChatPanel({
           const event = { target: input } as ChangeEvent<HTMLInputElement>
           onSelectImage(event)
         }
+      } else if (file.type.startsWith('video/')) {
+        const input = document.getElementById('video-file-input') as HTMLInputElement | null
+        if (input) {
+          const dt = new DataTransfer()
+          dt.items.add(file)
+          input.files = dt.files
+          const event = { target: input } as ChangeEvent<HTMLInputElement>
+          onSelectVideo(event)
+        }
       } else if (file.type === 'application/pdf' || file.name.toLowerCase().endsWith('.pdf')) {
         const input = document.getElementById('document-file-input') as HTMLInputElement | null
         if (input) {
@@ -449,12 +486,154 @@ export default function ChatPanel({
       }
     }
   }
+  const [skillsList, setSkillsList] = useState<LearnedSkill[]>([])
+  const [slashMenuOpen, setSlashMenuOpen] = useState(true)
+  const [slashSelectedIndex, setSlashSelectedIndex] = useState(0)
+  const slashMenuRef = useRef<HTMLDivElement>(null)
+  const slashListRef = useRef<HTMLDivElement>(null)
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+
+  const isSlashInput = message.trimStart().startsWith('/')
+  const isSkillInput = message.trimStart().startsWith('$')
+  const atMatch = message.match(/@([\w\-\.\/]*)$/)
+  const isAtInput = Boolean(atMatch)
+  const atQuery = atMatch ? atMatch[1].toLowerCase() : ''
+
+  const CONTEXT_SUGGESTIONS = [
+    { label: '@workspace', desc: 'Include workspace path & context' },
+    { label: '@file', desc: 'Reference workspace file' },
+    { label: '@docs', desc: 'Include documentation context' },
+    { label: '@memory', desc: 'Include long-term memory store' },
+  ]
+
+  const filteredContexts = isAtInput
+    ? CONTEXT_SUGGESTIONS.filter((item) => item.label.toLowerCase().includes(atQuery))
+    : []
+
+  useEffect(() => {
+    let isMounted = true
+    listLearnedSkills()
+      .then((res) => {
+        if (isMounted && Array.isArray(res)) setSkillsList(res)
+      })
+      .catch(() => {})
+    return () => { isMounted = false }
+  }, [isSkillInput])
+
+  const slashQuery = isSlashInput ? message.trimStart().toLowerCase() : ''
+  const filteredSlashCommands = isSlashInput
+    ? SLASH_COMMANDS.filter((c) => c.command.toLowerCase().startsWith(slashQuery))
+    : []
+
+  const skillQuery = isSkillInput ? message.trimStart().slice(1).toLowerCase() : ''
+  const filteredSkills = isSkillInput
+    ? skillsList.filter((s) => s.name.toLowerCase().startsWith(skillQuery))
+    : []
+
+  const showSuggestionMenu = slashMenuOpen && (
+    (isSlashInput && filteredSlashCommands.length > 0) ||
+    (isSkillInput && filteredSkills.length > 0) ||
+    (isAtInput && filteredContexts.length > 0)
+  )
+
+  const suggestionCount = isSlashInput
+    ? filteredSlashCommands.length
+    : isSkillInput
+    ? filteredSkills.length
+    : filteredContexts.length
+
+  useEffect(() => {
+    if (isSlashInput || isSkillInput || isAtInput) {
+      setSlashMenuOpen(true)
+      setSlashSelectedIndex(0)
+    }
+  }, [message])
+
+  useEffect(() => {
+    if (showSuggestionMenu && slashListRef.current) {
+      const activeItem = slashListRef.current.children[slashSelectedIndex] as HTMLElement
+      if (activeItem) {
+        activeItem.scrollIntoView({ block: 'nearest' })
+      }
+    }
+  }, [slashSelectedIndex, showSuggestionMenu])
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        slashMenuRef.current &&
+        !slashMenuRef.current.contains(event.target as Node) &&
+        textareaRef.current &&
+        !textareaRef.current.contains(event.target as Node)
+      ) {
+        setSlashMenuOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [])
+
+  const selectSlashCommand = (cmd: string) => {
+    onSetMessage(cmd + ' ')
+    setSlashMenuOpen(false)
+    setSlashSelectedIndex(0)
+    setTimeout(() => textareaRef.current?.focus(), 0)
+  }
+
+  const selectSkillCommand = (name: string) => {
+    onSetMessage('$' + name + ' ')
+    setSlashMenuOpen(false)
+    setSlashSelectedIndex(0)
+    setTimeout(() => textareaRef.current?.focus(), 0)
+  }
+
+  const selectAtCommand = (label: string) => {
+    const nextMsg = message.replace(/@[\w\-\.\/]*$/, label + ' ')
+    onSetMessage(nextMsg)
+    setSlashMenuOpen(false)
+    setSlashSelectedIndex(0)
+    setTimeout(() => textareaRef.current?.focus(), 0)
+  }
+
   const submitOnEnter = (event: KeyboardEvent<HTMLTextAreaElement>) => {
     if (event.key !== 'Enter' || event.shiftKey || event.nativeEvent.isComposing) return
     event.preventDefault()
     event.currentTarget.form?.requestSubmit()
   }
   const handleInputKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (showSuggestionMenu) {
+      if (event.key === 'ArrowDown') {
+        event.preventDefault()
+        setSlashSelectedIndex((prev) => (prev + 1) % suggestionCount)
+        return
+      }
+      if (event.key === 'ArrowUp') {
+        event.preventDefault()
+        setSlashSelectedIndex((prev) => (prev - 1 + suggestionCount) % suggestionCount)
+        return
+      }
+      if (event.key === 'Enter' || event.key === 'Tab') {
+        if (!event.shiftKey && !event.nativeEvent.isComposing) {
+          event.preventDefault()
+          if (isSlashInput) {
+            const selected = filteredSlashCommands[slashSelectedIndex] || filteredSlashCommands[0]
+            if (selected) selectSlashCommand(selected.command)
+          } else if (isSkillInput) {
+            const selected = filteredSkills[slashSelectedIndex] || filteredSkills[0]
+            if (selected) selectSkillCommand(selected.name)
+          } else if (isAtInput) {
+            const selected = filteredContexts[slashSelectedIndex] || filteredContexts[0]
+            if (selected) selectAtCommand(selected.label)
+          }
+          return
+        }
+      }
+      if (event.key === 'Escape') {
+        event.preventDefault()
+        setSlashMenuOpen(false)
+        return
+      }
+    }
     submitOnEnter(event)
   }
   const resizeInput = (element: HTMLTextAreaElement) => {
@@ -500,6 +679,10 @@ export default function ChatPanel({
     setToolMenuOpen(false)
     document.getElementById('vision-file-input')?.click()
   }
+  const openVideoPicker = () => {
+    setToolMenuOpen(false)
+    document.getElementById('video-file-input')?.click()
+  }
   const openDocumentPicker = () => {
     setToolMenuOpen(false)
     document.getElementById('document-file-input')?.click()
@@ -825,7 +1008,7 @@ export default function ChatPanel({
         >
           <div style={{ fontSize: '3.5rem', marginBottom: '16px' }}>🖼️</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 style={{ fontSize: '0.85rem', color: '#94a3b8', marginTop: '8px' }}>Supports images (PNG, JPEG, WebP, GIF), videos (MP4, WebM, MOV, MKV), and PDF files</div>
         </div>
       )}
 
@@ -833,6 +1016,8 @@ export default function ChatPanel({
         {interactions.map((interaction) => {
           const isSystemEvent = interaction.provider === 'system' && interaction.model === 'provider_change';
           if (isSystemEvent) {
+            const rawText = interaction.userText || ''
+            const cleanText = rawText.replace(/^Changed model to\s*/i, '').trim()
             return (
               <div key={interaction.id} className="system-event-divider">
                 <div className="system-event-line" />
@@ -840,7 +1025,7 @@ export default function ChatPanel({
                   <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                     <path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" />
                   </svg>
-                  <span>{interaction.userText}</span>
+                  <span>{cleanText}</span>
                 </div>
                 <div className="system-event-line" />
               </div>
@@ -852,7 +1037,17 @@ export default function ChatPanel({
                 <div className="message user-message">
                   <div className="bubble-wrapper">
                     <div className="message-bubble">{renderFormattedMessage(interaction.userText)}</div>
-                    <div className="message-time"><span>{new Date(interaction.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span></div>
+                    <div className="message-time" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                      <span>{new Date(interaction.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span>
+                      <button
+                        type="button"
+                        className={`msg-action-btn copy-btn ${copiedId === `user-${interaction.id}` ? 'is-copied' : ''}`}
+                        onClick={() => handleCopyMessage(`user-${interaction.id}`, interaction.userText)}
+                        title={copiedId === `user-${interaction.id}` ? 'คัดลอกแล้ว (Copied!)' : 'คัดลอกข้อความ (Copy)'}
+                      >
+                        {renderCopyIcon(copiedId === `user-${interaction.id}`)}
+                      </button>
+                    </div>
                   </div>
                 </div>
               )}
@@ -873,32 +1068,30 @@ export default function ChatPanel({
                     />
                   )
                 })()}
-                <div className="message-bubble" style={{ whiteSpace: 'pre-wrap' }}>{renderFormattedMessage(interaction.aiText)}</div>
+                <div className="message-bubble">{renderFormattedMessage(interaction.aiText)}</div>
                 {renderWebSearchSources(interaction)}
                 <div className="message-time" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                   <button className="provider-badge">{interaction.provider} • {interaction.model}</button>
                   {fallbackNotice(interaction) && <span className="provider-fallback-notice">{fallbackNotice(interaction)}</span>}
                   <span>{new Date(interaction.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span>
-                  <button
-                    type="button"
-                    className={`tts-btn ${speakingText === interaction.aiText ? 'is-speaking' : ''}`}
-                    onClick={() => speak(interaction.aiText)}
-                    style={{
-                      background: 'transparent',
-                      border: 'none',
-                      color: speakingText === interaction.aiText ? 'var(--accent)' : 'var(--text-soft)',
-                      cursor: 'pointer',
-                      fontSize: '0.85rem',
-                      padding: '2px',
-                      display: 'inline-flex',
-                      alignItems: 'center',
-                      opacity: 0.7,
-                      transition: 'all 0.2s',
-                    }}
-                    title={speakingText === interaction.aiText ? "Stop reading" : "Read aloud"}
-                  >
-                    {renderSpeakerIcon(speakingText === interaction.aiText)}
-                  </button>
+                  <div className="message-action-buttons" style={{ display: 'flex', alignItems: 'center', gap: '4px', marginLeft: 'auto' }}>
+                    <button
+                      type="button"
+                      className={`msg-action-btn copy-btn ${copiedId === interaction.id ? 'is-copied' : ''}`}
+                      onClick={() => handleCopyMessage(interaction.id, interaction.aiText)}
+                      title={copiedId === interaction.id ? 'คัดลอกแล้ว (Copied!)' : 'คัดลอกข้อความ (Copy message)'}
+                    >
+                      {renderCopyIcon(copiedId === interaction.id)}
+                    </button>
+                    <button
+                      type="button"
+                      className={`msg-action-btn tts-btn ${speakingText === interaction.aiText ? 'is-speaking' : ''}`}
+                      onClick={() => speak(interaction.aiText)}
+                      title={speakingText === interaction.aiText ? 'Stop reading' : 'Read aloud'}
+                    >
+                      {renderSpeakerIcon(speakingText === interaction.aiText)}
+                    </button>
+                  </div>
                 </div>
               </div>
             </div>
@@ -908,7 +1101,7 @@ export default function ChatPanel({
 
         {sending && (
           <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', marginBottom: '16px' }}>
-            <div className="message user-message"><div className="bubble-wrapper"><div className="message-bubble">{sendingImageMarkers ? renderFormattedMessage(`${sendingMessage} ${sendingImageMarkers}`) : renderFormattedMessage(sendingMessage)}</div></div></div>
+            <div className="message user-message"><div className="bubble-wrapper"><div className="message-bubble">{renderFormattedMessage([sendingMessage, sendingImageMarkers, sendingVideoMarkers].filter(Boolean).join(' '))}</div></div></div>
             {agentMode && (
               <AgentActivityDrawer
                 activityView={agentActivities}
@@ -967,26 +1160,24 @@ export default function ChatPanel({
                     <button className="provider-badge">{badge(streamedResponse.provider, streamedResponse.model)}</button>
                     {activeFallbackNotice && <span className="provider-fallback-notice">{activeFallbackNotice}</span>}
                     {streamedReply && (
-                      <button
-                        type="button"
-                        className={`tts-btn ${speakingText === streamedReply ? 'is-speaking' : ''}`}
-                        onClick={() => speak(streamedReply)}
-                        style={{
-                          background: 'transparent',
-                          border: 'none',
-                          color: speakingText === streamedReply ? 'var(--accent)' : 'var(--text-soft)',
-                          cursor: 'pointer',
-                          fontSize: '0.85rem',
-                          padding: '2px',
-                          display: 'inline-flex',
-                          alignItems: 'center',
-                          opacity: 0.7,
-                          transition: 'all 0.2s',
-                        }}
-                        title={speakingText === streamedReply ? "Stop reading" : "Read aloud"}
-                      >
-                         {renderSpeakerIcon(speakingText === streamedReply)}
-                      </button>
+                      <div className="message-action-buttons" style={{ display: 'flex', alignItems: 'center', gap: '4px', marginLeft: 'auto' }}>
+                        <button
+                          type="button"
+                          className={`msg-action-btn copy-btn ${copiedId === 'live' ? 'is-copied' : ''}`}
+                          onClick={() => handleCopyMessage('live', streamedReply)}
+                          title={copiedId === 'live' ? 'คัดลอกแล้ว (Copied!)' : 'คัดลอกข้อความ (Copy message)'}
+                        >
+                          {renderCopyIcon(copiedId === 'live')}
+                        </button>
+                        <button
+                          type="button"
+                          className={`msg-action-btn tts-btn ${speakingText === streamedReply ? 'is-speaking' : ''}`}
+                          onClick={() => speak(streamedReply)}
+                          title={speakingText === streamedReply ? 'Stop reading' : 'Read aloud'}
+                        >
+                          {renderSpeakerIcon(speakingText === streamedReply)}
+                        </button>
+                      </div>
                     )}
                   </div>
                 )}
@@ -1037,6 +1228,65 @@ export default function ChatPanel({
           </div>
         )}
 
+        {showSuggestionMenu && (
+          <div className="slash-suggestions-popup" ref={slashMenuRef}>
+            <div className="slash-suggestions-header">
+              {isSlashInput ? 'Slash Commands' : isSkillInput ? 'Learned Skills' : 'Context Mentions'} ({slashSelectedIndex + 1}/{suggestionCount})
+            </div>
+            <div className="slash-suggestions-list" ref={slashListRef}>
+              {isSlashInput
+                ? filteredSlashCommands.map((item, idx) => (
+                    <button
+                      key={item.command}
+                      type="button"
+                      className={`slash-suggestion-item ${idx === slashSelectedIndex ? 'active' : ''}`}
+                      onMouseDown={(e) => {
+                        e.preventDefault()
+                        selectSlashCommand(item.command)
+                      }}
+                      onMouseEnter={() => setSlashSelectedIndex(idx)}
+                    >
+                      <span className="slash-cmd-name">{item.command}</span>
+                      <span className="slash-cmd-desc">{item.description}</span>
+                    </button>
+                  ))
+                : isSkillInput
+                ? filteredSkills.map((item, idx) => (
+                    <button
+                      key={item.id || item.name}
+                      type="button"
+                      className={`slash-suggestion-item ${idx === slashSelectedIndex ? 'active' : ''}`}
+                      onMouseDown={(e) => {
+                        e.preventDefault()
+                        selectSkillCommand(item.name)
+                      }}
+                      onMouseEnter={() => setSlashSelectedIndex(idx)}
+                    >
+                      <span className="slash-cmd-name">${item.name}</span>
+                      <span className="skill-badge">[Skill]</span>
+                      <span className="slash-cmd-desc">{item.description || item.content?.slice(0, 60)}</span>
+                    </button>
+                  ))
+                : filteredContexts.map((item, idx) => (
+                    <button
+                      key={item.label}
+                      type="button"
+                      className={`slash-suggestion-item ${idx === slashSelectedIndex ? 'active' : ''}`}
+                      onMouseDown={(e) => {
+                        e.preventDefault()
+                        selectAtCommand(item.label)
+                      }}
+                      onMouseEnter={() => setSlashSelectedIndex(idx)}
+                    >
+                      <span className="slash-cmd-name">{item.label}</span>
+                      <span className="skill-badge">[Context]</span>
+                      <span className="slash-cmd-desc">{item.desc}</span>
+                    </button>
+                  ))}
+            </div>
+          </div>
+        )}
+
         <form
           id="chat-form"
           onSubmit={onSubmit}
@@ -1044,7 +1294,7 @@ export default function ChatPanel({
             if (onPasteImage(event.clipboardData)) event.preventDefault()
           }}
         >
-          {(imageAttachments.length > 0 || documentName) && (
+          {(imageAttachments.length > 0 || videoAttachments.length > 0 || documentName) && (
             <div className="mint-attachment">
               {imageAttachments.map((attachment, idx) => (
                 <div className="mint-image-attachment" key={idx}>
@@ -1052,6 +1302,17 @@ export default function ChatPanel({
                   <button className="mint-attachment-remove" type="button" onClick={() => onRemoveImage(idx)} aria-label="Remove image">×</button>
                 </div>
               ))}
+              {videoAttachments.map((attachment, idx) => (
+                <div className="mint-image-attachment" key={idx}>
+                  <video className="mint-image-preview" src={attachment.dataUri} muted playsInline preload="metadata" />
+                  <div className="mint-video-play-indicator" style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', pointerEvents: 'none', background: 'rgba(0,0,0,0.6)', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', width: '22px', height: '22px', border: '1.5px solid white' }}>
+                    <svg width="10" height="10" viewBox="0 0 24 24" fill="white" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                      <polygon points="5 3 19 12 5 21 5 3"></polygon>
+                    </svg>
+                  </div>
+                  <button className="mint-attachment-remove" type="button" onClick={() => onRemoveVideo(idx)} aria-label="Remove video">×</button>
+                </div>
+              ))}
               {documentName && (
                 <div style={{ display: 'flex', alignItems: 'center', gap: '8px', minWidth: 0 }}>
                   <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center', color: 'var(--accent)' }}>
@@ -1070,6 +1331,7 @@ export default function ChatPanel({
           )}
           <textarea
             id="chat-input"
+            ref={textareaRef}
             value={message}
             onChange={(event) => {
               resizeInput(event.currentTarget)
@@ -1080,47 +1342,57 @@ export default function ChatPanel({
             rows={1}
           />
           <div className="chat-tool-menu-wrap" ref={toolMenuRef}>
-            <button id="chat-tool-btn" type="button" aria-haspopup="menu" aria-expanded={toolMenuOpen} onClick={() => setToolMenuOpen((open) => !open)} style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
-              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
-                <line x1="12" y1="5" x2="12" y2="19"></line>
-                <line x1="5" y1="12" x2="19" y2="12"></line>
-              </svg>
-            </button>
-            {toolMenuOpen && (
-              <div className="chat-tool-menu" role="menu">
-                <button type="button" role="menuitem" onClick={openImagePicker}>
-                  <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>
-                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                      <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
-                      <circle cx="8.5" cy="8.5" r="1.5"></circle>
-                      <polyline points="21 15 16 10 5 21"></polyline>
-                    </svg>
-                  </span>
-                  <span>Add image</span>
-                </button>
-                <button type="button" role="menuitem" onClick={openDocumentPicker}>
-                  <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>
-                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" 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"></path>
-                      <polyline points="14 2 14 8 20 8"></polyline>
-                    </svg>
-                  </span>
-                  <span>Add file</span>
-                </button>
-                <button type="button" role="menuitem" onClick={startWebSearch}>
-                  <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>
-                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                      <circle cx="12" cy="12" r="10"></circle>
-                      <line x1="2" y1="12" x2="22" y2="12"></line>
-                      <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
-                    </svg>
-                  </span>
-                  <span>Search web</span>
-                </button>
-              </div>
-            )}
-          </div>
+              <button id="chat-tool-btn" type="button" aria-haspopup="menu" aria-expanded={toolMenuOpen} onClick={() => setToolMenuOpen((open) => !open)} style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+                  <line x1="12" y1="5" x2="12" y2="19"></line>
+                  <line x1="5" y1="12" x2="19" y2="12"></line>
+                </svg>
+              </button>
+              {toolMenuOpen && (
+                <div className="chat-tool-menu" role="menu">
+                  <button type="button" role="menuitem" onClick={openImagePicker}>
+                    <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+                        <circle cx="8.5" cy="8.5" r="1.5"></circle>
+                        <polyline points="21 15 16 10 5 21"></polyline>
+                      </svg>
+                    </span>
+                    <span>Add image</span>
+                  </button>
+                  <button type="button" role="menuitem" onClick={openVideoPicker}>
+                    <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="23 7 16 12 23 17 23 7"></polygon>
+                        <rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
+                      </svg>
+                    </span>
+                    <span>Add video</span>
+                  </button>
+                  <button type="button" role="menuitem" onClick={openDocumentPicker}>
+                    <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" 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"></path>
+                        <polyline points="14 2 14 8 20 8"></polyline>
+                      </svg>
+                    </span>
+                    <span>Add file</span>
+                  </button>
+                  <button type="button" role="menuitem" onClick={startWebSearch}>
+                    <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                        <circle cx="12" cy="12" r="10"></circle>
+                        <line x1="2" y1="12" x2="22" y2="12"></line>
+                        <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
+                      </svg>
+                    </span>
+                    <span>Search web</span>
+                  </button>
+                </div>
+              )}
+            </div>
           <input id="vision-file-input" type="file" accept="image/png,image/jpeg,image/webp,image/gif" onChange={onSelectImage} style={{ display: 'none' }} />
+          <input id="video-file-input" type="file" accept="video/mp4,video/webm,video/quicktime,video/x-matroska" onChange={onSelectVideo} style={{ display: 'none' }} />
           <input id="document-file-input" type="file" accept="application/pdf,.pdf" onChange={onSelectDocument} style={{ display: 'none' }} />
           <div className="chat-provider-select" style={{ display: 'flex', gap: '4px', padding: 0, background: 'transparent', border: 0, width: '100%', height: '32px' }}>
             <select