cognova 0.2.12 → 0.2.14

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/components/files/FileTree.vue

@@ -68,40 +68,29 @@ const showNewFileModal = ref(false)
 const showNewFolderModal = ref(false)
 const showRenameModal = ref(false)
 const showDeleteConfirm = ref(false)
-const newItemName = ref('')
 
 const contextMenuItems = computed(() => [
   [{
     label: 'New File',
     icon: 'i-lucide-file-plus',
-    onSelect: () => {
-      newItemName.value = ''
-      showNewFileModal.value = true
-    }
+    onSelect: () => { showNewFileModal.value = true }
   }, {
     label: 'New Folder',
     icon: 'i-lucide-folder-plus',
-    onSelect: () => {
-      newItemName.value = ''
-      showNewFolderModal.value = true
-    }
+    onSelect: () => { showNewFolderModal.value = true }
   }],
   [{
     label: 'Rename',
     icon: 'i-lucide-pencil',
     onSelect: () => {
-      if (contextMenuTarget.value) {
-        newItemName.value = contextMenuTarget.value.label
+      if (contextMenuTarget.value)
         showRenameModal.value = true
-      }
     }
   }, {
     label: 'Delete',
     icon: 'i-lucide-trash-2',
     color: 'error' as const,
-    onSelect: () => {
-      showDeleteConfirm.value = true
-    }
+    onSelect: () => { showDeleteConfirm.value = true }
   }]
 ])
 
@@ -112,18 +101,14 @@ function handleSelect(item: TreeItem) {
   }
 }
 
-async function handleCreateFile() {
-  if (!newItemName.value.trim()) return
-
+async function handleCreateFile(name: string) {
   const parentPath = contextMenuTarget.value?.type === 'directory'
     ? contextMenuTarget.value.path
     : '/'
 
-  // Add .md extension if not present
-  let filename = newItemName.value.trim()
-  if (!filename.includes('.')) {
+  let filename = name
+  if (!filename.includes('.'))
     filename += '.md'
-  }
 
   try {
     const path = await createFile(parentPath, filename)
@@ -132,39 +117,28 @@ async function handleCreateFile() {
   } catch {
     // Error handled in composable
   }
-
-  showNewFileModal.value = false
-  newItemName.value = ''
 }
 
-async function handleCreateFolder() {
-  if (!newItemName.value.trim()) return
-
+async function handleCreateFolder(name: string) {
   const parentPath = contextMenuTarget.value?.type === 'directory'
     ? contextMenuTarget.value.path
     : '/'
 
   try {
-    await createFolder(parentPath, newItemName.value.trim())
+    await createFolder(parentPath, name)
   } catch {
     // Error handled in composable
   }
-
-  showNewFolderModal.value = false
-  newItemName.value = ''
 }
 
-async function handleRename() {
-  if (!contextMenuTarget.value || !newItemName.value.trim()) return
+async function handleRename(name: string) {
+  if (!contextMenuTarget.value) return
 
   try {
-    await renameItem(contextMenuTarget.value.path, newItemName.value.trim())
+    await renameItem(contextMenuTarget.value.path, name)
   } catch {
     // Error handled in composable
   }
-
-  showRenameModal.value = false
-  newItemName.value = ''
 }
 
 async function handleDelete() {
@@ -175,8 +149,6 @@ async function handleDelete() {
   } catch {
     // Error handled in composable
   }
-
-  showDeleteConfirm.value = false
 }
 
 onMounted(() => {
@@ -270,167 +242,16 @@ onMounted(() => {
       </UTree>
     </UContextMenu>
 
-    <!-- New File Modal -->
-    <UModal v-model:open="showNewFileModal">
-      <template #content>
-        <UCard>
-          <template #header>
-            <div class="flex items-center gap-2">
-              <UIcon
-                name="i-lucide-file-plus"
-                class="size-5"
-              />
-              <span class="font-semibold">New File</span>
-            </div>
-          </template>
-
-          <UInput
-            v-model="newItemName"
-            placeholder="filename.md"
-            autofocus
-            @keyup.enter="handleCreateFile"
-          />
-
-          <template #footer>
-            <div class="flex justify-end gap-2">
-              <UButton
-                color="neutral"
-                variant="ghost"
-                @click="showNewFileModal = false"
-              >
-                Cancel
-              </UButton>
-              <UButton @click="handleCreateFile">
-                Create
-              </UButton>
-            </div>
-          </template>
-        </UCard>
-      </template>
-    </UModal>
-
-    <!-- New Folder Modal -->
-    <UModal v-model:open="showNewFolderModal">
-      <template #content>
-        <UCard>
-          <template #header>
-            <div class="flex items-center gap-2">
-              <UIcon
-                name="i-lucide-folder-plus"
-                class="size-5"
-              />
-              <span class="font-semibold">New Folder</span>
-            </div>
-          </template>
-
-          <UInput
-            v-model="newItemName"
-            placeholder="folder-name"
-            autofocus
-            @keyup.enter="handleCreateFolder"
-          />
-
-          <template #footer>
-            <div class="flex justify-end gap-2">
-              <UButton
-                color="neutral"
-                variant="ghost"
-                @click="showNewFolderModal = false"
-              >
-                Cancel
-              </UButton>
-              <UButton @click="handleCreateFolder">
-                Create
-              </UButton>
-            </div>
-          </template>
-        </UCard>
-      </template>
-    </UModal>
-
-    <!-- Rename Modal -->
-    <UModal v-model:open="showRenameModal">
-      <template #content>
-        <UCard>
-          <template #header>
-            <div class="flex items-center gap-2">
-              <UIcon
-                name="i-lucide-pencil"
-                class="size-5"
-              />
-              <span class="font-semibold">Rename</span>
-            </div>
-          </template>
-
-          <UInput
-            v-model="newItemName"
-            placeholder="new-name"
-            autofocus
-            @keyup.enter="handleRename"
-          />
-
-          <template #footer>
-            <div class="flex justify-end gap-2">
-              <UButton
-                color="neutral"
-                variant="ghost"
-                @click="showRenameModal = false"
-              >
-                Cancel
-              </UButton>
-              <UButton @click="handleRename">
-                Rename
-              </UButton>
-            </div>
-          </template>
-        </UCard>
-      </template>
-    </UModal>
-
-    <!-- Delete Confirmation -->
-    <UModal v-model:open="showDeleteConfirm">
-      <template #content>
-        <UCard>
-          <template #header>
-            <div class="flex items-center gap-2 text-error">
-              <UIcon
-                name="i-lucide-trash-2"
-                class="size-5"
-              />
-              <span class="font-semibold">Delete</span>
-            </div>
-          </template>
-
-          <p>
-            Are you sure you want to delete
-            <strong>{{ contextMenuTarget?.label }}</strong>?
-          </p>
-          <p
-            v-if="contextMenuTarget?.type === 'directory'"
-            class="text-sm text-dimmed mt-1"
-          >
-            This will delete all files and folders inside.
-          </p>
-
-          <template #footer>
-            <div class="flex justify-end gap-2">
-              <UButton
-                color="neutral"
-                variant="ghost"
-                @click="showDeleteConfirm = false"
-              >
-                Cancel
-              </UButton>
-              <UButton
-                color="error"
-                @click="handleDelete"
-              >
-                Delete
-              </UButton>
-            </div>
-          </template>
-        </UCard>
-      </template>
-    </UModal>
+    <FilesFileTreeModals
+      v-model:show-new-file="showNewFileModal"
+      v-model:show-new-folder="showNewFolderModal"
+      v-model:show-rename="showRenameModal"
+      v-model:show-delete="showDeleteConfirm"
+      :context-target="contextMenuTarget"
+      @create-file="handleCreateFile"
+      @create-folder="handleCreateFolder"
+      @rename="handleRename"
+      @delete="handleDelete"
+    />
   </div>
 </template>