From 7cf73ee71ebafb95748579976d7a1e70a3396775 Mon Sep 17 00:00:00 2001
From: Roie Schwaber-Cohen <roie.cohen@gmail.com>
Date: Mon, 8 Jan 2024 11:58:37 -0800
Subject: [PATCH] cleanup

---
 src/app/api/chat/route.ts                     |  2 +-
 src/app/api/crawl/seed.ts                     |  6 +-
 src/app/appContext.tsx                        |  1 -
 src/app/{utils => assets}/icons/ellipse.tsx   |  0
 src/app/{utils => assets}/icons/pinecone.tsx  |  0
 src/app/{utils => assets}/icons/user.tsx      |  0
 src/app/{utils => assets}/svg/blueEllipse.tsx |  0
 src/app/{utils => assets}/svg/ellipse.tsx     |  0
 src/app/{utils => assets}/svg/pinecone.tsx    |  0
 .../{utils => assets}/svg/pineconeLogo.tsx    |  0
 src/app/{utils => assets}/svg/upArrow.tsx     |  0
 src/app/{utils => assets}/svg/user.tsx        |  0
 src/app/components/Chat/ChatInput.tsx         |  3 +-
 src/app/components/Chat/ChatWrapper.tsx       |  6 +-
 src/app/components/Chat/Messages.tsx          | 17 +++---
 src/app/components/Chat/index.tsx             | 15 ++---
 src/app/components/InstructionModal.tsx       | 55 -------------------
 src/app/components/Sidebar/Card.tsx           |  2 +-
 src/app/components/Sidebar/index.tsx          | 13 -----
 src/app/page.tsx                              | 10 ++--
 src/app/{utils => services}/chunkedUpsert.ts  |  0
 src/app/{utils => services}/context.ts        |  6 +-
 src/app/{utils => services}/embeddings.ts     |  0
 src/app/{utils => services}/pinecone.ts       |  0
 24 files changed, 28 insertions(+), 108 deletions(-)
 rename src/app/{utils => assets}/icons/ellipse.tsx (100%)
 rename src/app/{utils => assets}/icons/pinecone.tsx (100%)
 rename src/app/{utils => assets}/icons/user.tsx (100%)
 rename src/app/{utils => assets}/svg/blueEllipse.tsx (100%)
 rename src/app/{utils => assets}/svg/ellipse.tsx (100%)
 rename src/app/{utils => assets}/svg/pinecone.tsx (100%)
 rename src/app/{utils => assets}/svg/pineconeLogo.tsx (100%)
 rename src/app/{utils => assets}/svg/upArrow.tsx (100%)
 rename src/app/{utils => assets}/svg/user.tsx (100%)
 delete mode 100644 src/app/components/InstructionModal.tsx
 rename src/app/{utils => services}/chunkedUpsert.ts (100%)
 rename src/app/{utils => services}/context.ts (84%)
 rename src/app/{utils => services}/embeddings.ts (100%)
 rename src/app/{utils => services}/pinecone.ts (100%)

diff --git a/src/app/api/chat/route.ts b/src/app/api/chat/route.ts
index eb3f48e..fdb1bb5 100644
--- a/src/app/api/chat/route.ts
+++ b/src/app/api/chat/route.ts
@@ -1,6 +1,6 @@
 import { Configuration, OpenAIApi } from 'openai-edge'
 import { Message, OpenAIStream, StreamingTextResponse, experimental_StreamData } from 'ai'
-import { Metadata, getContext } from '@/utils/context'
+import { Metadata, getContext } from '@/services/context'
 import { PineconeRecord, ScoredVector } from '@pinecone-database/pinecone'
 
 // Create an OpenAI API client (that's edge friendly!)
diff --git a/src/app/api/crawl/seed.ts b/src/app/api/crawl/seed.ts
index 77ec812..6e78405 100644
--- a/src/app/api/crawl/seed.ts
+++ b/src/app/api/crawl/seed.ts
@@ -1,10 +1,10 @@
-import { getEmbeddings } from "@/utils/embeddings";
+import { getEmbeddings } from "@/services/embeddings";
+import { truncateStringByBytes } from "@/utils/truncateString";
 import { Document, MarkdownTextSplitter, RecursiveCharacterTextSplitter } from "@pinecone-database/doc-splitter";
 import { Pinecone, PineconeRecord } from "@pinecone-database/pinecone";
-import { chunkedUpsert } from '../../utils/chunkedUpsert'
 import md5 from "md5";
+import { chunkedUpsert } from '@/services/chunkedUpsert';
 import { Crawler, Page } from "./crawler";
-import { truncateStringByBytes } from "@/utils/truncateString"
 
 interface SeedOptions {
   splittingMethod: string
diff --git a/src/app/appContext.tsx b/src/app/appContext.tsx
index a2fb14a..2a6fffa 100644
--- a/src/app/appContext.tsx
+++ b/src/app/appContext.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 
-
 interface RefreshIndexContextType {
     totalRecords: number;
     refreshIndex: () => Promise<void>;
diff --git a/src/app/utils/icons/ellipse.tsx b/src/app/assets/icons/ellipse.tsx
similarity index 100%
rename from src/app/utils/icons/ellipse.tsx
rename to src/app/assets/icons/ellipse.tsx
diff --git a/src/app/utils/icons/pinecone.tsx b/src/app/assets/icons/pinecone.tsx
similarity index 100%
rename from src/app/utils/icons/pinecone.tsx
rename to src/app/assets/icons/pinecone.tsx
diff --git a/src/app/utils/icons/user.tsx b/src/app/assets/icons/user.tsx
similarity index 100%
rename from src/app/utils/icons/user.tsx
rename to src/app/assets/icons/user.tsx
diff --git a/src/app/utils/svg/blueEllipse.tsx b/src/app/assets/svg/blueEllipse.tsx
similarity index 100%
rename from src/app/utils/svg/blueEllipse.tsx
rename to src/app/assets/svg/blueEllipse.tsx
diff --git a/src/app/utils/svg/ellipse.tsx b/src/app/assets/svg/ellipse.tsx
similarity index 100%
rename from src/app/utils/svg/ellipse.tsx
rename to src/app/assets/svg/ellipse.tsx
diff --git a/src/app/utils/svg/pinecone.tsx b/src/app/assets/svg/pinecone.tsx
similarity index 100%
rename from src/app/utils/svg/pinecone.tsx
rename to src/app/assets/svg/pinecone.tsx
diff --git a/src/app/utils/svg/pineconeLogo.tsx b/src/app/assets/svg/pineconeLogo.tsx
similarity index 100%
rename from src/app/utils/svg/pineconeLogo.tsx
rename to src/app/assets/svg/pineconeLogo.tsx
diff --git a/src/app/utils/svg/upArrow.tsx b/src/app/assets/svg/upArrow.tsx
similarity index 100%
rename from src/app/utils/svg/upArrow.tsx
rename to src/app/assets/svg/upArrow.tsx
diff --git a/src/app/utils/svg/user.tsx b/src/app/assets/svg/user.tsx
similarity index 100%
rename from src/app/utils/svg/user.tsx
rename to src/app/assets/svg/user.tsx
diff --git a/src/app/components/Chat/ChatInput.tsx b/src/app/components/Chat/ChatInput.tsx
index 5bf1faf..07c56a6 100644
--- a/src/app/components/Chat/ChatInput.tsx
+++ b/src/app/components/Chat/ChatInput.tsx
@@ -1,4 +1,4 @@
-import { UpArrowSvg } from '@/utils/svg/upArrow';
+import { UpArrowSvg } from '@/assets/svg/upArrow';
 import React, { FormEvent } from 'react';
 
 interface ChatInputProps {
@@ -25,7 +25,6 @@ const ChatInput: React.FC<ChatInputProps> = ({ input, handleInputChange, handleM
                 className="bg-white rounded-lg relative"
             >
                 <div style={styles.form}>
-
                     <input
                         type="text"
                         className="input-glow appearance-none w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline pl-3 pr-10 transition-shadow duration-200"
diff --git a/src/app/components/Chat/ChatWrapper.tsx b/src/app/components/Chat/ChatWrapper.tsx
index 591805e..5a1c2ba 100644
--- a/src/app/components/Chat/ChatWrapper.tsx
+++ b/src/app/components/Chat/ChatWrapper.tsx
@@ -1,8 +1,8 @@
-import React, { FormEvent, ChangeEvent, forwardRef, useImperativeHandle, useRef, Ref, useEffect, useState } from "react";
-import Messages from "./Messages";
+import type { PineconeRecord } from "@pinecone-database/pinecone";
 import { useChat } from "ai/react";
-import type { PineconeRecord, RecordMetadata, ScoredPineconeRecord } from "@pinecone-database/pinecone";
+import React, { ChangeEvent, FormEvent, Ref, forwardRef, useEffect, useImperativeHandle, useRef } from "react";
 import { v4 as uuidv4 } from 'uuid';
+import Messages from "./Messages";
 
 export interface ChatInterface {
     handleMessageSubmit: (e: FormEvent<HTMLFormElement>) => void;
diff --git a/src/app/components/Chat/Messages.tsx b/src/app/components/Chat/Messages.tsx
index 1d3f7aa..15803cf 100644
--- a/src/app/components/Chat/Messages.tsx
+++ b/src/app/components/Chat/Messages.tsx
@@ -1,14 +1,13 @@
+import { EllipseIcon } from "@/assets/icons/ellipse";
+import { PineconeIcon } from "@/assets/icons/pinecone";
+import { UserIcon } from "@/assets/icons/user";
+import { BlueEllipseSvg } from "@/assets/svg/blueEllipse";
+import { PineconeLogoSvg } from "@/assets/svg/pineconeLogo";
+import { Typography } from "@mui/material";
+import Popover from '@mui/material/Popover';
+import type { PineconeRecord } from "@pinecone-database/pinecone";
 import { Message } from "ai";
 import { useRef, useState } from "react";
-import { UserIcon } from "@/utils/icons/user";
-import { PineconeIcon } from "@/utils/icons/pinecone";
-import { EllipseIcon } from "@/utils/icons/ellipse";
-import { BlueEllipseSvg } from "@/utils/svg/blueEllipse";
-import { PineconeRecord } from "@pinecone-database/pinecone";
-import Popover from '@mui/material/Popover';
-import { Typography } from "@mui/material";
-import { PineconeSvg } from "@/utils/svg/pinecone";
-import { PineconeLogoSvg } from "@/utils/svg/pineconeLogo";
 
 export default function Messages({ messages, withContext, context }: { messages: Message[], withContext: boolean, context?: { context: PineconeRecord[] }[] }) {
   const messagesEndRef = useRef<HTMLDivElement | null>(null);
diff --git a/src/app/components/Chat/index.tsx b/src/app/components/Chat/index.tsx
index 4058239..9fc437a 100644
--- a/src/app/components/Chat/index.tsx
+++ b/src/app/components/Chat/index.tsx
@@ -1,10 +1,8 @@
-import React, { FormEvent, ChangeEvent, useRef, useEffect, useContext } from "react";
-import ChatWrapper, { ChatInterface } from "./ChatWrapper";
-import ChatInput from "./ChatInput";
-import { Message } from "ai";
-import type { PineconeRecord, RecordMetadata, ScoredPineconeRecord } from "@pinecone-database/pinecone";
-import useRefreshIndex from "@/hooks/useRefreshIndex";
 import AppContext from "@/appContext";
+import type { PineconeRecord } from "@pinecone-database/pinecone";
+import React, { ChangeEvent, FormEvent, useContext, useRef } from "react";
+import ChatInput from "./ChatInput";
+import ChatWrapper, { ChatInterface } from "./ChatWrapper";
 
 interface ChatProps {
   setContext: (data: { context: PineconeRecord[] }[]) => void;
@@ -18,11 +16,6 @@ const Chat: React.FC<ChatProps> = ({ setContext, context }) => {
 
   const { totalRecords } = useContext(AppContext);
 
-  useEffect(() => {
-    console.log("totalRecords", totalRecords)
-  }, [totalRecords])
-
-
   const [input, setInput] = React.useState<string>("")
   const onMessageSubmit = (e: FormEvent<HTMLFormElement>) => {
     setInput("")
diff --git a/src/app/components/InstructionModal.tsx b/src/app/components/InstructionModal.tsx
deleted file mode 100644
index fa95e04..0000000
--- a/src/app/components/InstructionModal.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from "react";
-import { AiFillGithub } from "react-icons/ai";
-
-interface InstructionModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-const InstructionModal: React.FC<InstructionModalProps> = ({
-  isOpen,
-  onClose,
-}) => {
-  if (!isOpen) return null;
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
-      <div className="bg-gray-300 p-5 z-50 rounded-lg shadow-lg relative w-8/12 md:w-5/12">
-        <button
-          onClick={onClose}
-          className="absolute right-2 text-3xl top-2 text-gray-500 hover:text-gray-700"
-        >
-          &times;
-        </button>
-        <h2 className="text-2xl font-bold mb-4">Instructions</h2>
-        <p>
-          This chatbot demonstrates a simple RAG pattern using{" "}
-          <a href="https://pinecone.io" target="_blank" className="text-gray">
-            Pinecone
-          </a>{" "}
-          and Vercel&apos;s AI SDK. In the context panel on the right, you can
-          see some articles you can index in Pinecone (on mobile, open the
-          context panel by clicking the button at the top left of the message
-          panel). Click on the blue link icons to open the URLs in a new window.
-        </p>
-        <br />
-        <p>
-          After you index them, you can ask the chatbot questions about the
-          specific of each article. The segments relevant to the answers the
-          chatbot gives will be highlighted.
-        </p>
-        <br />
-        <p>
-          You can clear the index by clicking the &quot;Clear Index&quot; button
-          in the context panel.
-        </p>
-      </div>
-      <div
-        className="absolute inset-0 bg-black z-20 opacity-50"
-        onClick={onClose}
-      ></div>
-    </div>
-  );
-};
-
-export default InstructionModal;
diff --git a/src/app/components/Sidebar/Card.tsx b/src/app/components/Sidebar/Card.tsx
index 73a6b80..e4990b6 100644
--- a/src/app/components/Sidebar/Card.tsx
+++ b/src/app/components/Sidebar/Card.tsx
@@ -1,4 +1,4 @@
-import { BlueEllipseSvg } from "@/utils/svg/blueEllipse";
+import { BlueEllipseSvg } from "@/assets/svg/blueEllipse";
 import { PineconeRecord } from "@pinecone-database/pinecone";
 import React, { FC } from "react";
 import ReactMarkdown from "react-markdown";
diff --git a/src/app/components/Sidebar/index.tsx b/src/app/components/Sidebar/index.tsx
index f28b014..a996f44 100644
--- a/src/app/components/Sidebar/index.tsx
+++ b/src/app/components/Sidebar/index.tsx
@@ -68,19 +68,6 @@ export const Sidebar: React.FC = () => {
     setSplittingMethod(value)
   }
 
-
-  const chunkSizePopoverTriggers = {
-    onMouseEnter: () => setOpenChunkSizePopover(true),
-    onMouseLeave: () => setOpenChunkSizePopover(false),
-  };
-
-
-
-  const overLapPopoverTriggers = {
-    onMouseEnter: () => setOpenOverLapPopover(true),
-    onMouseLeave: () => setOpenOverLapPopover(false),
-  };
-
   const handleEmbedAndUpsertClick = async () => {
     setCrawling(true)
     await crawlDocument(
diff --git a/src/app/page.tsx b/src/app/page.tsx
index ddc87d4..bacf8cc 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,13 +1,11 @@
-// page.tsx
-
 "use client";
 
-import React, { useEffect, useState } from "react";
-import { Sidebar } from "@/components/Sidebar";
 import Chat from "@/components/Chat";
-import AppContext from "./appContext";
-import useRefreshIndex from '@/hooks/useRefreshIndex'
+import { Sidebar } from "@/components/Sidebar";
+import useRefreshIndex from '@/hooks/useRefreshIndex';
 import type { PineconeRecord } from "@pinecone-database/pinecone";
+import React, { useEffect, useState } from "react";
+import AppContext from "./appContext";
 
 const Page: React.FC = () => {
   const [context, setContext] = useState<{ context: PineconeRecord[] }[] | null>(null);
diff --git a/src/app/utils/chunkedUpsert.ts b/src/app/services/chunkedUpsert.ts
similarity index 100%
rename from src/app/utils/chunkedUpsert.ts
rename to src/app/services/chunkedUpsert.ts
diff --git a/src/app/utils/context.ts b/src/app/services/context.ts
similarity index 84%
rename from src/app/utils/context.ts
rename to src/app/services/context.ts
index 031a250..713d7a1 100644
--- a/src/app/utils/context.ts
+++ b/src/app/services/context.ts
@@ -1,6 +1,6 @@
-import { ScoredVector } from "@pinecone-database/pinecone";
+import type { PineconeRecord } from "@pinecone-database/pinecone";
+import { getEmbeddings } from './embeddings';
 import { getMatchesFromEmbeddings } from "./pinecone";
-import { getEmbeddings } from './embeddings'
 
 export type Metadata = {
   url: string,
@@ -9,7 +9,7 @@ export type Metadata = {
 }
 
 // The function `getContext` is used to retrieve the context of a given message
-export const getContext = async (message: string, namespace: string, maxTokens = 3000, minScore = 0.7, getOnlyText = true): Promise<ScoredVector[]> => {
+export const getContext = async (message: string, namespace: string, maxTokens = 3000, minScore = 0.7, getOnlyText = true): Promise<PineconeRecord[]> => {
 
   // Get the embeddings of the input message
   const embedding = await getEmbeddings(message);
diff --git a/src/app/utils/embeddings.ts b/src/app/services/embeddings.ts
similarity index 100%
rename from src/app/utils/embeddings.ts
rename to src/app/services/embeddings.ts
diff --git a/src/app/utils/pinecone.ts b/src/app/services/pinecone.ts
similarity index 100%
rename from src/app/utils/pinecone.ts
rename to src/app/services/pinecone.ts