More cleanup

src/app/api/chat/route.ts

@@ -12,15 +12,6 @@ const openai = new OpenAIApi(config)
 // IMPORTANT! Set the runtime to edge
 export const runtime = 'edge'
 
-export class ExtendedStreamingTextResponse extends StreamingTextResponse {
-  additionalData: any;
-
-  constructor(stream: ReturnType<typeof OpenAIStream>, additionalData: any) {
-    super(stream);
-    this.additionalData = additionalData;
-  }
-}
-
 export async function POST(req: Request) {
   try {
 

src/app/appContext.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+
+interface RefreshIndexContextType {
+    totalRecords: number;
+    refreshIndex: () => Promise<void>;
+}
+const defaultContext: RefreshIndexContextType = {
+    totalRecords: 0,
+    refreshIndex: () => Promise.resolve(),
+};
+
+const AppContext = React.createContext<RefreshIndexContextType>(defaultContext);
+
+export default AppContext;

src/app/components/Chat/ChatInput.tsx

@@ -1,3 +1,4 @@
+import { UpArrowSvg } from '@/utils/svg/upArrow';
 import React, { FormEvent } from 'react';
 
 interface ChatInputProps {
@@ -18,11 +19,13 @@ const styles = {
 const ChatInput: React.FC<ChatInputProps> = ({ input, handleInputChange, handleMessageSubmit, showIndexMessage }) => {
     return (
         <div style={styles.container} className="w-full">
+            <input type="text" />
             <form
                 onSubmit={handleMessageSubmit}
                 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"
@@ -32,9 +35,7 @@ const ChatInput: React.FC<ChatInputProps> = ({ input, handleInputChange, handleM
                         maxLength={105}
                     />
                     <div style={{ ...styles.hint, position: "absolute" as "absolute", visibility: `${input.length > 0 ? "visible" : "hidden"}` }}>Hit enter to send</div>
-                    <svg style={styles.svg} xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="black" className="absolute right-0 top-0 mt-3 mr-3">
-                        <path d="M3.33301 9.99998L4.50801 11.175L9.16634 6.52498V16.6666H10.833V6.52498L15.483 11.1833L16.6663 9.99998L9.99967 3.33331L3.33301 9.99998Z" fill="white" />
-                    </svg>
+                    <UpArrowSvg />
                 </div>
 
                 {showIndexMessage && <div style={styles.message}>

src/app/components/Chat/ChatWrapper.tsx

@@ -32,8 +32,6 @@ const Chat: React.FC<ChatProps> = forwardRef<ChatInterface, ChatProps>(({ withCo
         }
     }, [data, setContext]);
 
-    const prevMessagesLengthRef = useRef(messages.length);
-
     const chatRef = useRef<ChatInterface>(null);
 
     useImperativeHandle(ref, () => ({

src/app/components/Chat/Messages.tsx

@@ -23,18 +23,6 @@ export default function Messages({ messages, withContext, context }: { messages:
     setAnchorEls(prev => ({ ...prev, [messageId]: null }));
   };
 
-  // const open = Boolean(anchorEl);
-  // const id = open ? 'simple-popover' : undefined;
-
-  const assistantMessages = messages.filter((_, index) => index % 2 === 1);
-  const assistantMessagesObject = assistantMessages.reduce((obj: { [key: string]: Message }, message) => {
-    obj[message.id] = message;
-    return obj;
-  }, {});
-
-  console.log(assistantMessagesObject);
-  console.log("context", context);
-
   const styles = {
     lightGrey: {
       color: "#72788D"

src/app/components/Chat/index.tsx

@@ -1,20 +1,28 @@
-import React, { FormEvent, ChangeEvent, useRef } from "react";
+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";
 
 interface ChatProps {
   setContext: (data: { context: PineconeRecord[] }[]) => void;
-  showIndexMessage: boolean;
   context: { context: PineconeRecord[] }[] | null;
 }
 
-const Chat: React.FC<ChatProps> = ({ setContext, showIndexMessage, context }) => {
+const Chat: React.FC<ChatProps> = ({ setContext, context }) => {
 
   const chatWithContextRef = useRef<ChatInterface | null>(null);
   const chatWithoutContextRef = useRef<ChatInterface | null>(null);
 
+  const { totalRecords } = useContext(AppContext);
+
+  useEffect(() => {
+    console.log("totalRecords", totalRecords)
+  }, [totalRecords])
+
+
   const [input, setInput] = React.useState<string>("")
   const onMessageSubmit = (e: FormEvent<HTMLFormElement>) => {
     setInput("")
@@ -41,7 +49,7 @@ const Chat: React.FC<ChatProps> = ({ setContext, showIndexMessage, context }) =>
       </div>
 
       <div className="w-full">
-        <ChatInput input={input} handleInputChange={onInputChange} handleMessageSubmit={onMessageSubmit} showIndexMessage={showIndexMessage} />
+        <ChatInput input={input} handleInputChange={onInputChange} handleMessageSubmit={onMessageSubmit} showIndexMessage={totalRecords === 0} />
       </div>
     </div>
   );

src/app/components/Sidebar/RecursiveSplittingOptions.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { Popover, PopoverHandler, PopoverContent } from "@material-tailwind/react";
+import { IoMdInformationCircleOutline } from "react-icons/io";
+
+interface RecursiveSplittingOptionsProps {
+    chunkSize: number;
+    setChunkSize: (value: number) => void;
+    overlap: number;
+    setOverlap: (value: number) => void;
+    openChunkSizePopover: boolean;
+    setOpenChunkSizePopover: (value: boolean) => void;
+    openOverLapPopover: boolean;
+    setOpenOverLapPopover: (value: boolean) => void;
+}
+
+export const RecursiveSplittingOptions: React.FC<RecursiveSplittingOptionsProps> = ({
+    chunkSize,
+    setChunkSize,
+    overlap,
+    setOverlap,
+    openChunkSizePopover,
+    setOpenChunkSizePopover,
+    openOverLapPopover,
+    setOpenOverLapPopover
+}) => {
+    const chunkSizePopoverTriggers = {
+        onMouseEnter: () => setOpenChunkSizePopover(true),
+        onMouseLeave: () => setOpenChunkSizePopover(false),
+    };
+
+    const overLapPopoverTriggers = {
+        onMouseEnter: () => setOpenOverLapPopover(true),
+        onMouseLeave: () => setOpenOverLapPopover(false),
+    };
+
+    return (
+        <div className="w-full">
+            <div className="my-4 flex flex-col">
+                <div className="flex flex-col w-full">
+                    <div className="flex gap-1">
+                        <span>Chunk Size: </span><span className="font-bold">{chunkSize}</span><span>
+                            <div>
+                                <Popover open={openChunkSizePopover} handler={setOpenChunkSizePopover} placement="left">
+                                    <PopoverHandler {...chunkSizePopoverTriggers}>
+                                        <div><IoMdInformationCircleOutline className="text-[#72788D] mt-1 text-lg" /></div>
+                                    </PopoverHandler>
+                                    <PopoverContent {...chunkSizePopoverTriggers} className="z-50 max-w-[24rem]" placeholder="">
+                                        <div className="mb-2 flex items-center justify-between gap-4">
+                                            Chunk size in recursive text splitting is the user defined portion of text that&apos;s divided and processed in each recursion step, influencing the accuracy of the operation.
+                                        </div>
+                                    </PopoverContent>
+                                </Popover>
+                            </div>
+                        </span>
+                    </div>
+
+                    <input
+                        className="p-2"
+                        type="range"
+                        id="chunkSize"
+                        min={1}
+                        max={2048}
+                        onChange={(e) => setChunkSize(parseInt(e.target.value))}
+                    />
+                </div>
+                <div className="flex flex-col w-full">
+                    <div className="flex gap-1">
+                        <span>Overlap:</span><span className="font-bold">{overlap}</span><span>
+                            <div>
+                                <Popover open={openOverLapPopover} handler={setOpenOverLapPopover} placement="left">
+                                    <PopoverHandler {...overLapPopoverTriggers}>
+                                        <div><IoMdInformationCircleOutline className="text-[#72788D] mt-1 text-lg" /></div>
+                                    </PopoverHandler>
+                                    <PopoverContent {...overLapPopoverTriggers} className="z-50 max-w-[24rem]" placeholder="">
+                                        <div className="mb-2 flex items-center justify-between gap-4">
+                                            Overlap in recursive text splitting is the user-specified section of text that&apos;s intentionally repeated across chunks to maintain context and potentially enhance accuracy.
+                                        </div>
+                                    </PopoverContent>
+                                </Popover>
+                            </div>
+                        </span>
+                    </div>
+                    <input
+                        className="p-2"
+                        type="range"
+                        id="overlap"
+                        min={1}
+                        max={200}
+                        onChange={(e) => setOverlap(parseInt(e.target.value))}
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};