@pheem49/mint 1.8.2 → 1.10.0

package/src/renderer/src/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
@@ -56,11 +61,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
@@ -80,6 +87,7 @@ export default function ChatPanel({
   sending,
   sendingMessage,
   sendingImageCount,
+  sendingVideoCount,
   streamedReply,
   streamedResponse,
   agentProgress,
@@ -88,6 +96,7 @@ export default function ChatPanel({
   onThinkingExpandedChange,
   message,
   imageAttachments,
+  videoAttachments,
   documentName,
   pendingApproval,
   smartContext,
@@ -98,11 +107,13 @@ export default function ChatPanel({
   welcomeInteraction,
   onSubmit,
   onSelectImage,
+  onSelectVideo,
   onSelectDocument,
   onPasteImage,
   onSetMessage,
   onSendVoiceMessage,
   onRemoveImage,
+  onRemoveVideo,
   onRemoveDocument,
   onStartWebSearch,
   onCaptureScreen,
@@ -170,6 +181,22 @@ export default function ChatPanel({
     return () => clearInterval(timer)
   }, [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 toolMenuRef = useRef<HTMLDivElement | null>(null)
   const audioRef = useRef<HTMLAudioElement | null>(null)
   const speechRunRef = useRef(0)
@@ -178,6 +205,72 @@ export default function ChatPanel({
   const lastAutoSpokenIdRef = useRef<number | string | null>(null)
   const speakingRef = useRef<string | null>(null)
 
+  // Drag and Drop Zone Overlay
+  const [isDragging, setIsDragging] = useState(false)
+  const dragCounter = useRef(0)
+
+  const handleDragEnter = (e: DragEvent<HTMLElement>) => {
+    e.preventDefault()
+    if (e.dataTransfer?.types?.includes('Files')) {
+      dragCounter.current++
+      setIsDragging(true)
+    }
+  }
+
+  const handleDragLeave = (e: DragEvent<HTMLElement>) => {
+    e.preventDefault()
+    if (e.dataTransfer?.types?.includes('Files')) {
+      dragCounter.current--
+      if (dragCounter.current === 0) {
+        setIsDragging(false)
+      }
+    }
+  }
+
+  const handleDragOver = (e: DragEvent<HTMLElement>) => {
+    e.preventDefault()
+  }
+
+  const handleDrop = (e: DragEvent<HTMLElement>) => {
+    e.preventDefault()
+    dragCounter.current = 0
+    setIsDragging(false)
+
+    const files = e.dataTransfer?.files
+    if (files && files.length > 0) {
+      const file = files[0]
+      if (file.type.startsWith('image/')) {
+        const input = document.getElementById('vision-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>
+          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) {
+          const dt = new DataTransfer()
+          dt.items.add(file)
+          input.files = dt.files
+          const event = { target: input } as ChangeEvent<HTMLInputElement>
+          onSelectDocument(event)
+        }
+      }
+    }
+  }
+
+
   const {
     isRecording,
     voiceMode,
@@ -200,8 +293,9 @@ export default function ChatPanel({
     onSetMessage: (val) => onSetMessage(val)
   })
 
-  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 voiceStatus = speakingText ? 'speaking' : (sending || voiceAwaitingResponse) ? 'thinking' : isRecording ? 'listening' : voiceMode ? 'ready' : 'off'
   const voiceStatusLabel = voiceStatus === 'speaking' ? 'Speaking' : voiceStatus === 'thinking' ? 'Thinking' : voiceStatus === 'listening' ? 'Listening' : 'Ready'
 
@@ -224,8 +318,13 @@ export default function ChatPanel({
       case 'ollama':
         return dynamicOllamaModels
       default:
+        if (provider.startsWith('custom:')) {
+          const id = provider.replace(/^custom:/, '')
+          const cp = (settingsConfig?.customProviders ?? []).find(p => p.id === id)
+          return cp?.models.map(m => m.modelId) ?? []
+        }
         return []
-    }
+      }
   }
 
   const activeProvider = status?.activeProvider ?? ''
@@ -251,6 +350,11 @@ export default function ChatPanel({
       case 'ollama':
         return settingsConfig.ollamaModel
       default:
+        if (provider.startsWith('custom:')) {
+          const id = provider.replace(/^custom:/, '')
+          const cp = (settingsConfig?.customProviders ?? []).find(p => p.id === id)
+          return (settingsConfig.customModelSelections ?? {})[id] ?? cp?.models[0]?.modelId ?? ''
+        }
         return ''
     }
   }
@@ -258,12 +362,154 @@ export default function ChatPanel({
   const workspaceName = workspacePath
     ? workspacePath.split(/[\\/]/).filter(Boolean).pop() || workspacePath
     : 'Select Project'
+  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(workspacePath)
+      .then((res) => {
+        if (isMounted && Array.isArray(res)) setSkillsList(res)
+      })
+      .catch(() => {})
+    return () => { isMounted = false }
+  }, [workspacePath, 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)
   }
 
@@ -382,14 +628,19 @@ export default function ChatPanel({
       }
     }
     if (sending) return
-    if (!settingsConfig?.enableVoiceReply && !voiceMode) {
-      lastAutoSpokenIdRef.current = latest?.id ?? null
+    if (!latest?.aiText || latest.id === lastAutoSpokenIdRef.current) return
+
+    if (!settingsConfig?.enableVoiceReply) {
+      lastAutoSpokenIdRef.current = latest.id
+      if (voiceMode) {
+        scheduleVoiceListen(350)
+      }
       return
     }
-    if (!latest?.aiText || latest.id === lastAutoSpokenIdRef.current) return
+
     lastAutoSpokenIdRef.current = latest.id
     speak(latest.aiText)
-  }, [interactions, sending, settingsConfig?.enableVoiceReply])
+  }, [interactions, sending, settingsConfig?.enableVoiceReply, voiceMode])
   useEffect(() => {
     if (!toolMenuOpen) return
     const closeMenu = (event: MouseEvent) => {
@@ -429,6 +680,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()
@@ -715,7 +970,46 @@ export default function ChatPanel({
   }
 
   return (
-    <section className={`conversation-panel ${isEmptyChat ? 'is-empty' : ''}`}>
+    <section
+      className={`conversation-panel ${isEmptyChat ? 'is-empty' : ''}`}
+      onDragEnter={handleDragEnter}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+      style={{ position: 'relative' }}
+    >
+      {isDragging && (
+        <div
+          className="drag-drop-overlay"
+          onDragEnter={handleDragEnter}
+          onDragLeave={handleDragLeave}
+          onDragOver={handleDragOver}
+          onDrop={handleDrop}
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            background: 'rgba(15, 23, 42, 0.82)',
+            backdropFilter: 'blur(8px)',
+            border: '2px dashed var(--accent)',
+            borderRadius: '16px',
+            margin: '12px',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: 'white',
+            zIndex: 1000,
+            pointerEvents: 'auto',
+          }}
+        >
+          <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), videos (MP4, WebM, MOV, MKV), and PDF files</div>
+        </div>
+      )}
       <div className="chat-header">
         <div className="chat-header-title">
           <img src="./assets/icon.png" alt="Logo" className="chat-header-logo" />
@@ -726,6 +1020,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" />
@@ -733,7 +1029,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>
@@ -745,7 +1041,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>
               )}
@@ -766,20 +1072,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)}
-                    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>
@@ -789,7 +1105,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}
@@ -848,14 +1164,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)}
-                        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>
                 )}
@@ -922,6 +1248,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}
@@ -936,7 +1321,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}>
@@ -949,6 +1334,22 @@ export default function ChatPanel({
                   </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">
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                      <line x1="18" y1="6" x2="6" y2="18"></line>
+                      <line x1="6" y1="6" x2="18" y2="18"></line>
+                    </svg>
+                  </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(--text-soft)' }}>
@@ -959,7 +1360,7 @@ export default function ChatPanel({
                   </span>
                   <span style={{ fontSize: '0.76rem', color: 'var(--text-soft)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '220px' }}>{documentName}</span>
                   <button type="button" onClick={onRemoveDocument} style={{ background: 'transparent', border: 0, color: '#ef4444', cursor: 'pointer', display: 'inline-flex', alignItems: 'center' }}>
-                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                       <line x1="18" y1="6" x2="6" y2="18"></line>
                       <line x1="6" y1="6" x2="18" y2="18"></line>
                     </svg>
@@ -970,6 +1371,7 @@ export default function ChatPanel({
           )}
           <textarea
             id="chat-input"
+            ref={textareaRef}
             value={message}
             onChange={(event) => {
               resizeInput(event.currentTarget)
@@ -981,46 +1383,56 @@ 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 width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" 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} style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                  <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>
-                    <svg width="14" height="14" 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} style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                  <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>
-                    <svg width="14" height="14" 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} style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                  <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                      <circle cx="11" cy="11" r="8"></circle>
-                      <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-                    </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 width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" 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} style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                    <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>
+                      <svg width="14" height="14" 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} style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                    <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>
+                      <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} style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                    <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>
+                      <svg width="14" height="14" 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} style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                    <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                        <circle cx="11" cy="11" r="8"></circle>
+                        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                      </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' }} />
           <button id="screen-capture-btn" type="button" onClick={onCaptureScreen} aria-label="Capture screen">
             <span className="screen-capture-eye" aria-hidden="true" />
@@ -1055,6 +1467,11 @@ export default function ChatPanel({
                 else if (provider === 'huggingface') displayName = 'HF'
                 else if (provider === 'local_openai') displayName = 'Local'
                 else if (provider === 'ollama') displayName = 'Ollama'
+                else if (provider.startsWith('custom:')) {
+                  const id = provider.replace(/^custom:/, '')
+                  const cp = (settingsConfig?.customProviders ?? []).find(p => p.id === id)
+                  displayName = cp?.displayName || id
+                }
                 return <option key={provider} value={provider}>{displayName}</option>
               })}
             </select>