cognova 0.2.11 → 0.2.13

package/app/components/chat/ChatInput.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ChatSessionStatus, ChatConnectionStatus } from '~~/shared/types'
+import type { ChatSessionStatus, ChatConnectionStatus, ChatImageBlock, ChatDocumentBlock } from '~~/shared/types'
 
 const props = defineProps<{
   sessionStatus: ChatSessionStatus
@@ -7,16 +7,24 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  send: [message: string]
+  send: [message: string, attachments?: ChatImageBlock[], documents?: ChatDocumentBlock[]]
   interrupt: []
 }>()
 
+const { attachments, addFiles, removeAttachment, clearAttachments, toImageBlocks, toDocumentBlocks } = useAttachments()
+
 const inputText = ref('')
 const textareaRef = ref<HTMLTextAreaElement | null>(null)
+const fileInputRef = ref<HTMLInputElement | null>(null)
+const isDragging = ref(false)
 
 const isStreaming = computed(() => props.sessionStatus === 'streaming')
 const isConnected = computed(() => props.connectionStatus === 'connected')
-const canSend = computed(() => isConnected.value && !isStreaming.value && inputText.value.trim().length > 0)
+const canSend = computed(() =>
+  isConnected.value
+  && !isStreaming.value
+  && (inputText.value.trim().length > 0 || attachments.value.length > 0)
+)
 
 function handleKeydown(e: KeyboardEvent) {
   if (e.key === 'Enter' && !e.shiftKey) {
@@ -27,8 +35,16 @@ function handleKeydown(e: KeyboardEvent) {
 
 function handleSend() {
   if (!canSend.value) return
-  emit('send', inputText.value.trim())
+  const images = toImageBlocks()
+  const docs = toDocumentBlocks()
+  emit(
+    'send',
+    inputText.value.trim(),
+    images.length > 0 ? images : undefined,
+    docs.length > 0 ? docs : undefined
+  )
   inputText.value = ''
+  clearAttachments()
   nextTick(() => {
     if (textareaRef.value) textareaRef.value.style.height = 'auto'
   })
@@ -39,10 +55,64 @@ function autoResize(e: Event) {
   target.style.height = 'auto'
   target.style.height = Math.min(target.scrollHeight, 200) + 'px'
 }
+
+function handlePaste(e: ClipboardEvent) {
+  const files = Array.from(e.clipboardData?.files || [])
+  if (files.length > 0) {
+    e.preventDefault()
+    addFiles(files)
+  }
+}
+
+function handleDragOver(e: DragEvent) {
+  e.preventDefault()
+  isDragging.value = true
+}
+
+function handleDragLeave() {
+  isDragging.value = false
+}
+
+function handleDrop(e: DragEvent) {
+  e.preventDefault()
+  isDragging.value = false
+  const files = Array.from(e.dataTransfer?.files || [])
+  if (files.length > 0) addFiles(files)
+}
+
+function handleFileSelect(e: Event) {
+  const input = e.target as HTMLInputElement
+  if (input.files?.length) addFiles(input.files)
+  input.value = ''
+}
+
+const FILE_ACCEPT = [
+  'image/jpeg', 'image/png', 'image/gif', 'image/webp',
+  'application/pdf',
+  '.txt', '.md', '.js', '.ts', '.jsx', '.tsx', '.py', '.rb', '.rs', '.go',
+  '.java', '.c', '.cpp', '.h', '.cs', '.swift', '.kt',
+  '.json', '.yaml', '.yml', '.toml', '.ini',
+  '.xml', '.html', '.css', '.scss',
+  '.sh', '.sql', '.graphql', '.csv', '.log',
+  '.vue', '.svelte', '.prisma', '.lua', '.dart'
+].join(',')
 </script>
 
 <template>
-  <div class="border-t border-default p-4">
+  <div
+    class="border-t border-default p-4 relative"
+    @dragover="handleDragOver"
+    @dragleave="handleDragLeave"
+    @drop="handleDrop"
+  >
+    <!-- Drag overlay -->
+    <div
+      v-if="isDragging"
+      class="absolute inset-0 bg-primary/10 border-2 border-dashed border-primary rounded-lg flex items-center justify-center z-10"
+    >
+      <span class="text-sm text-primary font-medium">Drop files here</span>
+    </div>
+
     <!-- Connection status -->
     <div
       v-if="!isConnected"
@@ -52,6 +122,45 @@ function autoResize(e: Event) {
       <span>{{ connectionStatus === 'connecting' ? 'Connecting...' : 'Disconnected' }}</span>
     </div>
 
+    <!-- Attachment preview strip -->
+    <div
+      v-if="attachments.length"
+      class="flex gap-2 mb-2 flex-wrap"
+    >
+      <div
+        v-for="att in attachments"
+        :key="att.id"
+        class="relative group rounded-lg overflow-hidden border border-default"
+        :class="att.kind === 'image' ? 'size-16' : 'h-10 px-3 flex items-center gap-1.5 bg-elevated/50'"
+      >
+        <!-- Image thumbnail -->
+        <img
+          v-if="att.kind === 'image'"
+          :src="att.previewUrl"
+          :alt="att.name"
+          class="size-full object-cover"
+        >
+        <!-- Document chip -->
+        <template v-else>
+          <UIcon
+            :name="att.name.endsWith('.pdf') ? 'i-lucide-file-text' : 'i-lucide-file-code'"
+            class="size-4 text-dimmed shrink-0"
+          />
+          <span class="text-xs truncate max-w-24">{{ att.name }}</span>
+        </template>
+
+        <button
+          class="absolute top-0 right-0 p-0.5 bg-error/80 rounded-bl-lg opacity-0 group-hover:opacity-100 transition-opacity"
+          @click="removeAttachment(att.id)"
+        >
+          <UIcon
+            name="i-lucide-x"
+            class="size-3 text-white"
+          />
+        </button>
+      </div>
+    </div>
+
     <div class="flex items-start gap-2">
       <textarea
         ref="textareaRef"
@@ -62,6 +171,25 @@ function autoResize(e: Event) {
         class="flex-1 resize-none bg-elevated/50 border border-default rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50 disabled:opacity-50"
         @keydown="handleKeydown"
         @input="autoResize"
+        @paste="handlePaste"
+      />
+
+      <input
+        ref="fileInputRef"
+        type="file"
+        :accept="FILE_ACCEPT"
+        multiple
+        class="hidden"
+        @change="handleFileSelect"
+      >
+
+      <UButton
+        icon="i-lucide-paperclip"
+        variant="ghost"
+        color="neutral"
+        size="md"
+        :disabled="!isConnected || isStreaming"
+        @click="fileInputRef?.click()"
       />
 
       <UButton

package/app/components/chat/MessageBubble.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ChatMessage, ChatContentBlock, MessageSource } from '~~/shared/types'
+import type { ChatMessage, ChatContentBlock, ChatImageBlock, ChatDocumentBlock, MessageSource, CodeLanguage } from '~~/shared/types'
 
 defineProps<{
   message: ChatMessage
@@ -12,6 +12,14 @@ function getTextContent(blocks: ChatContentBlock[]): string {
     .join('\n')
 }
 
+function getImageBlocks(blocks: ChatContentBlock[]): ChatImageBlock[] {
+  return blocks.filter((b): b is ChatImageBlock => b.type === 'image')
+}
+
+function getDocumentBlocks(blocks: ChatContentBlock[]): ChatDocumentBlock[] {
+  return blocks.filter((b): b is ChatDocumentBlock => b.type === 'document')
+}
+
 function getToolPairs(blocks: ChatContentBlock[]) {
   const tools: { name: string, id: string, result?: string, isError?: boolean }[] = []
   for (const block of blocks) {
@@ -28,6 +36,99 @@ function getToolPairs(blocks: ChatContentBlock[]) {
   return tools
 }
 
+function getDocIcon(doc: ChatDocumentBlock): string {
+  if (doc.source.media_type === 'application/pdf') return 'i-lucide-file-text'
+  return 'i-lucide-file-code'
+}
+
+// Image preview
+const previewImage = ref<ChatImageBlock | null>(null)
+const previewOpen = computed({
+  get: () => previewImage.value !== null,
+  set: (v) => { if (!v) previewImage.value = null }
+})
+
+// Code/document preview
+const previewDoc = ref<ChatDocumentBlock | null>(null)
+const codePreviewOpen = computed({
+  get: () => previewDoc.value !== null,
+  set: (v) => { if (!v) previewDoc.value = null }
+})
+
+const codePreviewContent = computed(() => previewDoc.value?.source.data || '')
+
+const extToLang: Record<string, CodeLanguage> = {
+  md: 'markdown',
+  js: 'javascript',
+  mjs: 'javascript',
+  cjs: 'javascript',
+  jsx: 'javascript',
+  ts: 'typescript',
+  tsx: 'typescript',
+  mts: 'typescript',
+  json: 'json',
+  html: 'html',
+  htm: 'html',
+  css: 'css',
+  scss: 'css',
+  sass: 'css',
+  less: 'css',
+  vue: 'vue',
+  svelte: 'html',
+  py: 'python',
+  sql: 'sql',
+  yaml: 'yaml',
+  yml: 'yaml',
+  sh: 'bash',
+  bash: 'bash',
+  zsh: 'bash',
+  fish: 'bash',
+  go: 'go',
+  rs: 'rust',
+  dockerfile: 'dockerfile',
+  java: 'java',
+  kt: 'java',
+  c: 'cpp',
+  cpp: 'cpp',
+  h: 'cpp',
+  hpp: 'cpp',
+  cs: 'cpp',
+  xml: 'xml',
+  graphql: 'plaintext',
+  gql: 'plaintext',
+  toml: 'plaintext',
+  ini: 'plaintext',
+  csv: 'plaintext',
+  txt: 'plaintext',
+  log: 'plaintext',
+  env: 'plaintext',
+  prisma: 'plaintext',
+  proto: 'plaintext'
+}
+
+const codePreviewLang = computed<CodeLanguage>(() => {
+  if (!previewDoc.value?.title) return 'plaintext'
+  const ext = previewDoc.value.title.split('.').pop()?.toLowerCase() || ''
+  return extToLang[ext] || 'plaintext'
+})
+
+function handleDocClick(doc: ChatDocumentBlock) {
+  if (doc.source.media_type === 'application/pdf') {
+    // Open PDF in new tab
+    const byteChars = atob(doc.source.data)
+    const bytes = new Uint8Array(byteChars.length)
+    for (let i = 0; i < byteChars.length; i++)
+      bytes[i] = byteChars.charCodeAt(i)
+    const blob = new Blob([bytes], { type: 'application/pdf' })
+    const url = URL.createObjectURL(blob)
+    window.open(url, '_blank')
+    setTimeout(() => URL.revokeObjectURL(url), 10000)
+  } else {
+    // Open text file in code viewer modal
+    previewDoc.value = doc
+  }
+}
+
 const sourceIconMap: Record<string, string> = {
   telegram: 'i-simple-icons-telegram',
   discord: 'i-simple-icons-discord',
@@ -76,11 +177,52 @@ function formatTime(date: Date | string | undefined): string {
         : 'bg-muted'"
     >
       <!-- User message -->
-      <div
-        v-if="message.role === 'user'"
-        class="text-sm whitespace-pre-wrap"
-      >
-        {{ getTextContent(message.content) }}
+      <div v-if="message.role === 'user'">
+        <!-- Image attachments -->
+        <div
+          v-if="getImageBlocks(message.content).length"
+          class="flex flex-wrap gap-2 mb-2"
+        >
+          <img
+            v-for="(img, i) in getImageBlocks(message.content)"
+            :key="i"
+            :src="`data:${img.source.media_type};base64,${img.source.data}`"
+            class="max-w-48 max-h-48 rounded-lg object-contain cursor-pointer hover:opacity-80 transition-opacity"
+            @click="previewImage = img"
+          >
+        </div>
+
+        <!-- Document attachments -->
+        <div
+          v-if="getDocumentBlocks(message.content).length"
+          class="flex flex-wrap gap-2 mb-2"
+        >
+          <button
+            v-for="(doc, i) in getDocumentBlocks(message.content)"
+            :key="i"
+            class="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-elevated/50 border border-default text-xs hover:bg-elevated transition-colors cursor-pointer"
+            @click="handleDocClick(doc)"
+          >
+            <UIcon
+              :name="getDocIcon(doc)"
+              class="size-3.5 text-dimmed shrink-0"
+            />
+            <span class="truncate max-w-32">{{ doc.title || 'Document' }}</span>
+            <UIcon
+              v-if="doc.source.media_type === 'application/pdf'"
+              name="i-lucide-external-link"
+              class="size-3 text-dimmed shrink-0"
+            />
+          </button>
+        </div>
+
+        <!-- Text content -->
+        <div
+          v-if="getTextContent(message.content)"
+          class="text-sm whitespace-pre-wrap"
+        >
+          {{ getTextContent(message.content) }}
+        </div>
       </div>
 
       <!-- Assistant message -->
@@ -121,5 +263,45 @@ function formatTime(date: Date | string | undefined): string {
         {{ formatTime(message.createdAt) }}
       </div>
     </div>
+
+    <!-- Image preview modal -->
+    <UModal
+      v-model:open="previewOpen"
+    >
+      <template #content>
+        <div class="flex items-center justify-center">
+          <img
+            v-if="previewImage"
+            :src="`data:${previewImage.source.media_type};base64,${previewImage.source.data}`"
+            class="max-w-full max-h-[80vh] object-contain rounded-lg"
+          >
+        </div>
+      </template>
+    </UModal>
+
+    <!-- Code preview modal -->
+    <UModal
+      v-model:open="codePreviewOpen"
+    >
+      <template #header>
+        <div class="flex items-center gap-2">
+          <UIcon
+            name="i-lucide-file-code"
+            class="size-4 text-dimmed"
+          />
+          <span class="text-sm font-medium truncate">{{ previewDoc?.title || 'File' }}</span>
+        </div>
+      </template>
+      <template #body>
+        <div class="h-[60vh] overflow-hidden rounded-lg border border-default">
+          <EditorCodeEditor
+            v-if="previewDoc"
+            :model-value="codePreviewContent"
+            :language="codePreviewLang"
+            read-only
+          />
+        </div>
+      </template>
+    </UModal>
   </div>
 </template>

package/app/composables/useAttachments.ts

@@ -0,0 +1,196 @@
+import type { ChatImageBlock, ChatImageMediaType, ChatDocumentBlock } from '~~/shared/types'
+
+const IMAGE_TYPES: ChatImageMediaType[] = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']
+
+const TEXT_MIME_TYPES = new Set([
+  'application/json',
+  'application/javascript',
+  'application/typescript',
+  'application/xml',
+  'application/x-yaml',
+  'application/x-sh',
+  'application/sql',
+  'application/toml',
+  'application/x-httpd-php'
+])
+
+const MAX_FILE_SIZE = 20 * 1024 * 1024 // 20MB
+
+export interface PendingImageAttachment {
+  id: string
+  kind: 'image'
+  previewUrl: string
+  base64: string
+  mediaType: ChatImageMediaType
+  name: string
+}
+
+export interface PendingDocumentAttachment {
+  id: string
+  kind: 'document'
+  data: string
+  sourceType: 'base64' | 'text'
+  name: string
+}
+
+export type PendingAttachment = PendingImageAttachment | PendingDocumentAttachment
+
+function generateId(): string {
+  if (typeof crypto !== 'undefined' && crypto.randomUUID)
+    return crypto.randomUUID()
+  return Math.random().toString(36).slice(2)
+}
+
+function readFileAsBase64(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => {
+      const result = reader.result as string
+      const base64 = result.split(',')[1]
+      if (base64) resolve(base64)
+      else reject(new Error('Failed to read file as base64'))
+    }
+    reader.onerror = () => reject(reader.error)
+    reader.readAsDataURL(file)
+  })
+}
+
+function readFileAsText(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => resolve(reader.result as string)
+    reader.onerror = () => reject(reader.error)
+    reader.readAsText(file)
+  })
+}
+
+function isImageType(mime: string): mime is ChatImageMediaType {
+  return IMAGE_TYPES.includes(mime as ChatImageMediaType)
+}
+
+function isTextType(mime: string): boolean {
+  return mime.startsWith('text/') || TEXT_MIME_TYPES.has(mime)
+}
+
+function isPdfType(mime: string): boolean {
+  return mime === 'application/pdf'
+}
+
+export function useAttachments() {
+  const attachments = ref<PendingAttachment[]>([])
+  const toast = useToast()
+
+  async function addFiles(files: FileList | File[]) {
+    for (const file of Array.from(files)) {
+      if (file.size > MAX_FILE_SIZE) {
+        toast.add({ title: 'File too large', description: `${file.name} exceeds 20MB limit`, color: 'error' })
+        continue
+      }
+
+      const mime = file.type || ''
+
+      try {
+        if (isImageType(mime)) {
+          const base64 = await readFileAsBase64(file)
+          const previewUrl = URL.createObjectURL(file)
+          attachments.value.push({
+            id: generateId(),
+            kind: 'image',
+            previewUrl,
+            base64,
+            mediaType: mime,
+            name: file.name
+          })
+        } else if (isPdfType(mime)) {
+          const base64 = await readFileAsBase64(file)
+          attachments.value.push({
+            id: generateId(),
+            kind: 'document',
+            data: base64,
+            sourceType: 'base64',
+            name: file.name
+          })
+        } else if (isTextType(mime) || isLikelyTextFile(file.name)) {
+          const text = await readFileAsText(file)
+          attachments.value.push({
+            id: generateId(),
+            kind: 'document',
+            data: text,
+            sourceType: 'text',
+            name: file.name
+          })
+        } else {
+          toast.add({ title: 'Unsupported file type', description: `${file.name} (${mime || 'unknown type'})`, color: 'error' })
+        }
+      } catch {
+        toast.add({ title: 'Failed to read file', description: file.name, color: 'error' })
+      }
+    }
+  }
+
+  function removeAttachment(id: string) {
+    const idx = attachments.value.findIndex(a => a.id === id)
+    if (idx !== -1) {
+      const att = attachments.value[idx]!
+      if (att.kind === 'image') URL.revokeObjectURL(att.previewUrl)
+      attachments.value.splice(idx, 1)
+    }
+  }
+
+  function clearAttachments() {
+    for (const att of attachments.value)
+      if (att.kind === 'image') URL.revokeObjectURL(att.previewUrl)
+    attachments.value = []
+  }
+
+  function toImageBlocks(): ChatImageBlock[] {
+    return attachments.value
+      .filter((a): a is PendingImageAttachment => a.kind === 'image')
+      .map(att => ({
+        type: 'image' as const,
+        source: {
+          type: 'base64' as const,
+          media_type: att.mediaType,
+          data: att.base64
+        }
+      }))
+  }
+
+  function toDocumentBlocks(): ChatDocumentBlock[] {
+    return attachments.value
+      .filter((a): a is PendingDocumentAttachment => a.kind === 'document')
+      .map(att => ({
+        type: 'document' as const,
+        source: att.sourceType === 'base64'
+          ? { type: 'base64' as const, media_type: 'application/pdf' as const, data: att.data }
+          : { type: 'text' as const, media_type: 'text/plain' as const, data: att.data },
+        title: att.name
+      }))
+  }
+
+  return {
+    attachments: readonly(attachments),
+    addFiles,
+    removeAttachment,
+    clearAttachments,
+    toImageBlocks,
+    toDocumentBlocks
+  }
+}
+
+/** Fallback for files with empty MIME but recognizable extensions */
+function isLikelyTextFile(name: string): boolean {
+  const ext = name.split('.').pop()?.toLowerCase()
+  if (!ext) return false
+  const textExtensions = new Set([
+    'txt', 'md', 'js', 'ts', 'jsx', 'tsx', 'py', 'rb', 'rs', 'go',
+    'java', 'c', 'cpp', 'h', 'hpp', 'cs', 'swift', 'kt', 'scala',
+    'json', 'yaml', 'yml', 'toml', 'ini', 'cfg', 'conf',
+    'xml', 'html', 'htm', 'css', 'scss', 'sass', 'less',
+    'sh', 'bash', 'zsh', 'fish', 'ps1', 'bat', 'cmd',
+    'sql', 'graphql', 'gql', 'proto',
+    'csv', 'tsv', 'log', 'env', 'gitignore', 'dockerignore',
+    'vue', 'svelte', 'astro', 'prisma', 'tf', 'r', 'lua', 'dart'
+  ])
+  return textExtensions.has(ext)
+}

package/app/composables/useChat.ts

@@ -2,6 +2,8 @@ import type {
   ChatConversation,
   ChatMessage,
   ChatContentBlock,
+  ChatImageBlock,
+  ChatDocumentBlock,
   ChatServerMessage,
   ChatSessionStatus,
   ChatConnectionStatus
@@ -200,21 +202,31 @@ export function useChat() {
     }
   }
 
-  function sendMessage(message: string) {
+  function sendMessage(message: string, attachments?: ChatImageBlock[], documents?: ChatDocumentBlock[]) {
     if (!ws.value || ws.value.readyState !== WebSocket.OPEN) return
 
+    // Build content blocks for local display
+    const content: ChatContentBlock[] = []
+    if (attachments?.length)
+      for (const img of attachments) content.push(img)
+    if (documents?.length)
+      for (const doc of documents) content.push(doc)
+    if (message) content.push({ type: 'text', text: message })
+
     // Add user message locally
     messages.value.push({
       id: generateId(),
       conversationId: activeConversationId.value || '',
       role: 'user',
-      content: [{ type: 'text', text: message }],
+      content,
       createdAt: new Date()
     })
 
     ws.value.send(JSON.stringify({
       type: 'chat:send',
       message,
+      attachments: attachments?.length ? attachments : undefined,
+      documents: documents?.length ? documents : undefined,
       conversationId: activeConversationId.value
     }))
   }

package/app/pages/chat.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { ChatImageBlock, ChatDocumentBlock } from '~~/shared/types'
+
 definePageMeta({
   layout: 'dashboard',
   middleware: 'auth'
@@ -53,8 +55,8 @@ onMounted(() => {
   }
 })
 
-function handleSend(message: string) {
-  sendMessage(message)
+function handleSend(message: string, attachments?: ChatImageBlock[], documents?: ChatDocumentBlock[]) {
+  sendMessage(message, attachments, documents)
   nextTick(scrollToBottom)
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cognova",
   "type": "module",
-  "version": "0.2.11",
+  "version": "0.2.13",
   "description": "Personal knowledge management system with Claude Code integration",
   "repository": {
     "type": "git",