chore: temp commit

app/api/langchain/rag/store/route.ts

@@ -0,0 +1,159 @@
+import { NextRequest, NextResponse } from "next/server";
+import { auth } from "@/app/api/auth";
+import { NodeJSTool } from "@/app/api/langchain-tools/nodejs_tools";
+import { ACCESS_CODE_PREFIX, ModelProvider } from "@/app/constant";
+import { OpenAI, OpenAIEmbeddings } from "@langchain/openai";
+import path from "path";
+import { PDFLoader } from "langchain/document_loaders/fs/pdf";
+import { RecursiveCharacterTextSplitter } from "langchain/text_splitter";
+import { Pinecone } from "@pinecone-database/pinecone";
+import { Document } from "@langchain/core/documents";
+import { PineconeStore } from "@langchain/pinecone";
+import { getServerSideConfig } from "@/app/config/server";
+import { RequestBody } from "../../tool/agent/agentapi";
+
+async function handle(req: NextRequest) {
+  if (req.method === "OPTIONS") {
+    return NextResponse.json({ body: "OK" }, { status: 200 });
+  }
+  try {
+    const authResult = auth(req, ModelProvider.GPT);
+    if (authResult.error) {
+      return NextResponse.json(authResult, {
+        status: 401,
+      });
+    }
+
+    const reqBody: RequestBody = await req.json();
+    const authToken = req.headers.get("Authorization") ?? "";
+    const token = authToken.trim().replaceAll("Bearer ", "").trim();
+
+    //https://js.langchain.com/docs/integrations/vectorstores/pinecone
+    // const formData = await req.formData();
+    // const file = formData.get("file") as File;
+    // const originalFileName = file?.name;
+
+    // const fileReader = file.stream().getReader();
+    // const fileData: number[] = [];
+
+    // while (true) {
+    //   const { done, value } = await fileReader.read();
+    //   if (done) break;
+    //   fileData.push(...value);
+    // }
+
+    // const buffer = Buffer.from(fileData);
+    // const fileType = path.extname(originalFileName).slice(1);
+    // const fileBlob = bufferToBlob(buffer, "application/pdf")
+
+    // const loader = new PDFLoader(fileBlob);
+    // const docs = await loader.load();
+    // const textSplitter = new RecursiveCharacterTextSplitter({
+    //   chunkSize: 1000,
+    //   chunkOverlap: 200,
+    // });
+    // const splits = await textSplitter.splitDocuments(docs);
+    const pinecone = new Pinecone();
+    // await pinecone.createIndex({
+    //   name: 'example-index',
+    //   dimension: 1536,
+    //   metric: 'cosine',
+    //   spec: {
+    //     pod: {
+    //       environment: 'gcp-starter',
+    //       podType: 'p1.x1',
+    //       pods: 1
+    //     }
+    //   }
+    // });
+    const pineconeIndex = pinecone.Index("example-index");
+    const docs = [
+      new Document({
+        metadata: { foo: "bar" },
+        pageContent: "pinecone is a vector db",
+      }),
+      new Document({
+        metadata: { foo: "bar" },
+        pageContent: "the quick brown fox jumped over the lazy dog",
+      }),
+      new Document({
+        metadata: { baz: "qux" },
+        pageContent: "lorem ipsum dolor sit amet",
+      }),
+      new Document({
+        metadata: { baz: "qux" },
+        pageContent: "pinecones are the woody fruiting body and of a pine tree",
+      }),
+    ];
+    const apiKey = getOpenAIApiKey(token);
+    const baseUrl = getOpenAIBaseUrl(reqBody.baseUrl);
+    console.log(baseUrl);
+    const embeddings = new OpenAIEmbeddings(
+      {
+        modelName: "text-embedding-ada-002",
+        openAIApiKey: apiKey,
+      },
+      { basePath: baseUrl },
+    );
+    await PineconeStore.fromDocuments(docs, embeddings, {
+      pineconeIndex,
+      maxConcurrency: 5,
+    });
+    const vectorStore = await PineconeStore.fromExistingIndex(embeddings, {
+      pineconeIndex,
+    });
+    const results = await vectorStore.similaritySearch("pinecone", 1, {
+      foo: "bar",
+    });
+    console.log(results);
+    return NextResponse.json(
+      {
+        storeId: "",
+      },
+      {
+        status: 200,
+      },
+    );
+  } catch (e) {
+    console.error(e);
+    return new Response(JSON.stringify({ error: (e as any).message }), {
+      status: 500,
+      headers: { "Content-Type": "application/json" },
+    });
+  }
+}
+
+function bufferToBlob(buffer: Buffer, mimeType?: string): Blob {
+  const arrayBuffer: ArrayBuffer = buffer.buffer.slice(
+    buffer.byteOffset,
+    buffer.byteOffset + buffer.byteLength,
+  );
+  return new Blob([arrayBuffer], { type: mimeType || "" });
+}
+function getOpenAIApiKey(token: string) {
+  const serverConfig = getServerSideConfig();
+  const isApiKey = !token.startsWith(ACCESS_CODE_PREFIX);
+
+  let apiKey = serverConfig.apiKey;
+  if (isApiKey && token) {
+    apiKey = token;
+  }
+  return apiKey;
+}
+
+function getOpenAIBaseUrl(reqBaseUrl: string | undefined) {
+  const serverConfig = getServerSideConfig();
+  let baseUrl = "https://api.openai.com/v1";
+  if (serverConfig.baseUrl) baseUrl = serverConfig.baseUrl;
+  if (reqBaseUrl?.startsWith("http://") || reqBaseUrl?.startsWith("https://"))
+    baseUrl = reqBaseUrl;
+  if (!baseUrl.endsWith("/v1"))
+    baseUrl = baseUrl.endsWith("/") ? `${baseUrl}v1` : `${baseUrl}/v1`;
+  console.log("[baseUrl]", baseUrl);
+  return baseUrl;
+}
+
+export const GET = handle;
+export const POST = handle;
+
+export const runtime = "nodejs";

app/client/platforms/utils.ts

@@ -1,7 +1,16 @@
 import { getHeaders } from "../api";
 
+export interface FileInfo {
+  originalFilename: string;
+  fileName: string;
+  filePath: string;
+  size: number;
+}
+
 export class FileApi {
-  async upload(file: any): Promise<any> {
+  async upload(file: any): Promise<FileInfo> {
+    const fileName = file.name;
+    const fileSize = file.size;
     const formData = new FormData();
     formData.append("file", file);
     var headers = getHeaders(true);
@@ -16,6 +25,8 @@ export class FileApi {
     const resJson = await res.json();
     console.log(resJson);
     return {
+      originalFilename: fileName,
+      size: fileSize,
       fileName: resJson.fileName,
       filePath: resJson.filePath,
     };

app/components/chat.module.scss

@@ -17,12 +17,30 @@
   background-size: cover;
   background-position: center;
   background-color: var(--second);
+  display: flex;
+
+  span {
+    position: absolute;
+    font-size: 12px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    line-height: 1.5;
+    top: 8px;
+    bottom: 8px;
+    left: 5px;
+    right: 10px;
+    pointer-events: none;
+  }
 
   .attach-file-mask {
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: all ease 0.2s;
+    z-index: 999;
   }
 
   .attach-file-mask:hover {
@@ -40,25 +58,6 @@
     float: right;
     background-color: var(--white);
   }
-
-  .attach-file-name {
-    font-size: 12px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    padding: 4px;
-    box-sizing: border-box;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    word-break: break-all;
-    // line-height: 1.2;
-    // max-height: 2.4em;
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
 }
 
 .attach-images {

app/components/chat.tsx

@@ -118,6 +118,7 @@ import {
   WebTranscriptionApi,
 } from "../utils/speech";
 import { getServerSideConfig } from "../config/server";
+import { FileInfo } from "../client/platforms/utils";
 
 const ttsPlayer = createTTSPlayer();
 
@@ -463,7 +464,7 @@ export function ChatActions(props: {
   uploadImage: () => void;
   setAttachImages: (images: string[]) => void;
   uploadFile: () => void;
-  setAttachFiles: (files: string[]) => void;
+  setAttachFiles: (files: FileInfo[]) => void;
   setUploading: (uploading: boolean) => void;
   showPromptModal: () => void;
   scrollToBottom: () => void;
@@ -769,7 +770,7 @@ function _Chat() {
   const navigate = useNavigate();
   const [attachImages, setAttachImages] = useState<string[]>([]);
   const [uploading, setUploading] = useState(false);
-  const [attachFiles, setAttachFiles] = useState<string[]>([]);
+  const [attachFiles, setAttachFiles] = useState<FileInfo[]>([]);
 
   // prompt hints
   const promptStore = usePromptStore();
@@ -1353,11 +1354,11 @@ function _Chat() {
   }
 
   async function uploadFile() {
-    const uploadFiles: string[] = [];
+    const uploadFiles: FileInfo[] = [];
     uploadFiles.push(...attachFiles);
 
     uploadFiles.push(
-      ...(await new Promise<string[]>((res, rej) => {
+      ...(await new Promise<FileInfo[]>((res, rej) => {
         const fileInput = document.createElement("input");
         fileInput.type = "file";
         fileInput.accept = ".pdf,.txt,.json,.csv,.md";
@@ -1366,7 +1367,7 @@ function _Chat() {
           setUploading(true);
           const files = event.target.files;
           const api = new ClientApi();
-          const fileDatas: string[] = [];
+          const fileDatas: FileInfo[] = [];
           for (let i = 0; i < files.length; i++) {
             const file = event.target.files[i];
             api.file
@@ -1375,7 +1376,7 @@ function _Chat() {
                 console.log(fileInfo);
                 fileDatas.push(fileInfo);
                 if (
-                  fileDatas.length === 5 ||
+                  fileDatas.length === 3 ||
                   fileDatas.length === files.length
                 ) {
                   setUploading(false);
@@ -1778,7 +1779,12 @@ function _Chat() {
             <div className={styles["attach-files"]}>
               {attachFiles.map((file, index) => {
                 return (
-                  <div key={index} className={styles["attach-file"]}>
+                  <div
+                    key={index}
+                    className={styles["attach-file"]}
+                    title={file.originalFilename}
+                  >
+                    <span>{file.originalFilename}</span>
                     <div className={styles["attach-file-mask"]}>
                       <DeleteFileButton
                         deleteFile={() => {
@@ -1788,7 +1794,6 @@ function _Chat() {
                         }}
                       />
                     </div>
-                    <div className={styles["attach-file-name"]}>${file}</div>
                   </div>
                 );
               })}