cleanup: add file_id to chunks created from pdf2md and remove the file-context from search-component

Author: skeptrunedev

clients/search-component/package.json

@@ -19,7 +19,7 @@
       "import": "./dist/vanilla/index.js"
     }
   },
-  "version": "0.2.57",
+  "version": "0.2.58",
   "license": "MIT",
   "homepage": "https://github.com/devflowinc/trieve/tree/main/clients/search-component",
   "scripts": {

clients/search-component/src/TrieveModal/Search/PdfItem.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from "react";
 import { PdfChunk } from "../../utils/types";
-import { useFileContext } from "../../utils/hooks/file-context";
 import { FileDTO } from "trieve-ts-sdk";
 import { useModalState } from "../../utils/hooks/modal-context";
 import { cached } from "../../utils/cache";
@@ -26,7 +25,7 @@ const getPresignedUrl = async (
   baseUrl: string,
   datasetId: string,
   fileId: string,
-  apiKey: string,
+  apiKey: string
 ) => {
   const params = {
     content_type: "application/pdf",
@@ -51,7 +50,6 @@ const getPresignedUrl = async (
 export const PdfItem = (props: Props) => {
   const [presigned, setPresigned] = useState<string | null>(null);
   const toHighlight = extractMarkedContent(props.item.chunk.highlight || "");
-  const fileCtx = useFileContext();
   const state = useModalState();
   const [hasFoundMatch, setHasFoundMatch] = useState(true);
 
@@ -61,11 +59,11 @@ export const PdfItem = (props: Props) => {
         return getPresignedUrl(
           state.props.baseUrl || "http://localhost:8090",
           state.props.datasetId,
-          fileCtx.files[props.item.chunk.metadata.file_name],
-          state.props.apiKey,
+          props.item.chunk.metadata.file_id,
+          state.props.apiKey
         );
       }, `file-presigned:${props.item.chunk.metadata.file_name}`);
-      console.log(presignedUrlResult);
+
       setPresigned(presignedUrlResult);
     };
 

clients/search-component/src/TrieveModal/index.css

@@ -62,7 +62,7 @@ body {
     &.chat-modal-mobile {
       @apply flex flex-col top-0 sm:top-[calc(40%-30vh)] pt-4 max-h-[100vh] w-full sm:w-[90vw] rounded-none sm:rounded-lg;
 
-      &.docs {
+      &.docs, &.pdf {
         @apply h-screen sm:h-auto;
       }
 
@@ -71,8 +71,8 @@ body {
       }
     }
 
-    .trieve-elements-docs {
-      @apply pr-2 scroll-smooth;
+    .trieve-elements-docs, .trieve-elements-pdf {
+      @apply scroll-smooth;
 
       .item-group-container {
         @apply border-b border-gray-300 mb-5;
@@ -98,12 +98,8 @@ body {
       }
     }
 
-    .trieve-elements-pdf {
-      @apply p-2;
-    }
-
     .pdf-results {
-      @apply grid grid-cols-2 pl-2;
+      @apply grid grid-cols-2;
     }
 
     .no-results {
@@ -138,7 +134,7 @@ body {
     .mode-switch-wrapper {
       @apply flex items-center justify-end mt-2 absolute top-2.5 right-4 z-30 font-medium;
 
-      &.docs.chat {
+      &.docs.chat, &.pdf.chat {
         @apply top-0;
 
         right: calc(max(calc(50% - 39.85rem), 4rem) + 0.25rem);
@@ -278,7 +274,7 @@ body {
     }
 
     .trieve-powered {
-      @apply flex items-center justify-end select-none cursor-pointer text-sm text-center;
+      @apply flex items-center justify-end select-none cursor-pointer text-sm text-center gap-1;
       background-color: var(--bg-color);
 
       img {
@@ -757,14 +753,14 @@ body {
       }
 
       input {
-        @apply rounded-none mb-0;
+        @apply rounded-md mb-0;
       }
     }
 
     ul {
       &:not(.chat-ul) {
         @apply overflow-y-auto overflow-x-hidden max-h-[calc(80vh-130px)] sm:max-h-[calc(60vh-130px)];
-        &:not(.trieve-elements-docs) {
+        &:not(.trieve-elements-docs, .trieve-elements-pdf) {
           @apply max-h-[calc(98vh-130px)] sm:max-h-[calc(60vh-130px)];
 
           &:not(.commands) &:not(.trieve-elements-ecommerce) {
@@ -774,7 +770,7 @@ body {
       }
 
       &:not(.chat-ul):not(.trieve-elements-ecommerce) {
-        @apply pl-0 mx-0;
+        @apply pl-2 pr-0.5 mx-0;
       }
     }
 

clients/search-component/src/TrieveModal/index.tsx

@@ -40,7 +40,7 @@ const Modal = () => {
     const viewportHeight = window.visualViewport?.height;
     const chatOuterWrapper = document.querySelector(".chat-outer-wrapper");
 
-    if ((window.visualViewport?.width ?? 1000) <= 768) {
+    if ((window.visualViewport?.width ?? 1000) <= 640) {
       const trieveSearchModal = document.getElementById("trieve-search-modal");
       if (trieveSearchModal) {
         trieveSearchModal.style.maxHeight = `calc(${viewportHeight}px - ${

clients/search-component/src/utils/hooks/file-context.tsx

@@ -22,7 +22,6 @@ import {
   searchWithTrieve,
   getPagefindIndex,
 } from "../trieve";
-import { FileContextProvider } from "./file-context";
 
 export const ALL_TAG = {
   tag: "all",
@@ -455,7 +454,7 @@ const ModalProvider = ({
         tagCounts,
       }}
     >
-      <FileContextProvider>{children}</FileContextProvider>
+      {children}
     </ModalContext.Provider>
   );
 };

clients/search-component/src/utils/hooks/modal-context.tsx

@@ -41,6 +41,7 @@ export type PdfChunk = {
     metadata: {
       file_name: string;
       page_num: number;
+      file_id: string;
     };
   };
   highlights: string[];

clients/search-component/src/utils/types.ts

@@ -521,11 +521,13 @@ async fn upload_file(
                             .map(|mut metadata| {
                                 metadata["page_num"] = serde_json::json!(page.page_num);
                                 metadata["file_name"] = serde_json::json!(task_response.file_name);
+                                metadata["file_id"] = serde_json::json!(file_id);
                                 metadata
                             })
                             .or(Some(serde_json::json!({
                                 "page_num": page.page_num,
-                                "file_name": task_response.file_name
+                                "file_name": task_response.file_name,
+                                "file_id": file_id
                             })));
 
                         let create_chunk_data = ChunkReqPayload {