added api for extension

.env.example

@@ -0,0 +1,6 @@
+OPENAI_API_KEY=
+
+# Update these with your Supabase details from your project settings > API and dashboard settings
+PINECONE_API_KEY=
+PINECONE_ENVIRONMENT=
+PINECONE_INDEX_NAME=

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+#Notion_db
+/Notion_DB

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "all",
+  "singleQuote": true,
+  "printWidth": 80,
+  "tabWidth": 2
+}

README.md

@@ -0,0 +1,88 @@
+# GPT-4 & LangChain - Create a ChatGPT Chatbot for articles
+
+It's demo project, based on [repo](https://github.com/hwchase17/chat-langchain) 
+
+Frontend [repo](https://github.com/idapgroup/chat-gpt-extension)
+
+Use the new GPT-4 api to build a chatGPT chatbot for get information from articles.
+
+Tech stack used includes LangChain, Pinecone, Typescript, Openai, and Next.js. LangChain is a framework that makes it easier to build scalable AI/LLM apps and chatbots. Pinecone is a vectorstore for storing embeddings and your PDF in text to later retrieve similar docs.
+
+[Tutorial video](https://www.youtube.com/watch?v=ih9PBGVVOO4)
+
+[Get in touch via twitter if you have questions](https://twitter.com/mayowaoshin)
+
+The visual guide of this repo and tutorial is in the `visual guide` folder.
+
+**If you run into errors, please review the troubleshooting section further down this page.**
+
+## Development
+
+1. Clone the repo
+
+```
+git clone [github https url]
+```
+
+2. Install packages
+
+```
+yarn install
+```
+
+3. Set up your `.env` file
+
+- Copy `.env.example` into `.env`
+  Your `.env` file should look like this:
+
+```
+OPENAI_API_KEY=
+
+PINECONE_API_KEY=
+PINECONE_ENVIRONMENT=
+
+PINECONE_INDEX_NAME=
+
+```
+
+- Visit [openai](https://help.openai.com/en/articles/4936850-where-do-i-find-my-secret-api-key) to retrieve API keys and insert into your `.env` file.
+- Visit [pinecone](https://pinecone.io/) to create and retrieve your API keys, and also retrieve your environment and index name from the dashboard.
+
+4. In the `config` folder, replace the `PINECONE_NAME_SPACE` with a `namespace` where you'd like to store your embeddings on Pinecone when you run `pnpm run ingest`. This namespace will later be used for queries and retrieval.
+
+5. In `utils/makechain.ts` chain change the `QA_PROMPT` for your own usecase. Change `modelName` in `new OpenAIChat` to `gpt-3.5-turbo`, if you don't have access to `gpt-4`. Please verify outside this repo that you have access to `gpt-4`, otherwise the application will not work with it.
+
+## Convert your PDF files to embeddings
+
+**This repo can load multiple PDF files**
+
+1. Inside `docs` folder, add your pdf files or folders that contain pdf files.
+
+2. Run the script `npm run ingest` to 'ingest' and embed your docs. If you run into errors troubleshoot below.
+
+3. Check Pinecone dashboard to verify your namespace and vectors have been added.
+
+## Run the app
+
+Once you've verified that the embeddings and content have been successfully added to your Pinecone, you can run the app `pnpm run dev` to launch the local dev environment, and then type a question in the chat interface.
+
+## Troubleshooting
+
+In general, keep an eye out in the `issues` and `discussions` section of this repo for solutions.
+
+**General errors**
+
+- Make sure you're running the latest Node version. Run `node -v`
+- Make sure you're using the same versions of LangChain and Pinecone as this repo.
+- Check that you've created an `.env` file that contains your valid (and working) API keys, environment and index name.
+- If you change `modelName` in `OpenAIChat` note that the correct name of the alternative model is `gpt-3.5-turbo`
+- Make sure you have access to `gpt-4` if you decide to use. Test your openAI keys outside the repo and make sure it works and that you have enough API credits.
+- Your pdf file is corrupted and cannot be parsed.
+
+**Pinecone errors**
+
+- Make sure your pinecone dashboard `environment` and `index` matches the one in the `pinecone.ts` and `.env` files.
+- Check that you've set the vector dimensions to `1536`.
+- Make sure your pinecone namespace is in lowercase.
+- Pinecone indexes of users on the Starter(free) plan are deleted after 7 days of inactivity. To prevent this, send an API request to Pinecone to reset the counter.
+- Retry from scratch with a new Pinecone index and cloned repo.

components/layout.tsx

@@ -0,0 +1,24 @@
+interface LayoutProps {
+  children?: React.ReactNode;
+}
+
+export default function Layout({ children }: LayoutProps) {
+  return (
+    <div className="mx-auto flex flex-col space-y-4">
+      <header className="container sticky top-0 z-40 bg-white">
+        <div className="h-16 border-b border-b-slate-200 py-4">
+          <nav className="ml-4 pl-6">
+            <a href="#" className="hover:text-slate-600 cursor-pointer">
+              Home
+            </a>
+          </nav>
+        </div>
+      </header>
+      <div>
+        <main className="flex w-full flex-1 flex-col overflow-hidden">
+          {children}
+        </main>
+      </div>
+    </div>
+  );
+}

components/ui/LoadingDots.tsx

@@ -0,0 +1,23 @@
+import styles from '@/styles/loading-dots.module.css';
+
+const LoadingDots = ({
+  color = '#000',
+  style = 'small',
+}: {
+  color: string;
+  style: string;
+}) => {
+  return (
+    <span className={style == 'small' ? styles.loading2 : styles.loading}>
+      <span style={{ backgroundColor: color }} />
+      <span style={{ backgroundColor: color }} />
+      <span style={{ backgroundColor: color }} />
+    </span>
+  );
+};
+
+export default LoadingDots;
+
+LoadingDots.defaultProps = {
+  style: 'small',
+};

components/ui/TextArea.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { cn } from '@/utils/cn';
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          'flex h-20 w-full rounded-md border border-slate-300 bg-transparent py-2 px-3 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900',
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Textarea.displayName = 'Textarea';
+
+export { Textarea };

components/ui/accordion.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDown } from 'lucide-react';
+
+import { cn } from '@/utils/cn';
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn(
+      'border-b border-b-slate-200 dark:border-b-slate-700',
+      className,
+    )}
+    {...props}
+  />
+));
+AccordionItem.displayName = 'AccordionItem';
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className={cn(
+      'data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up overflow-hidden text-sm transition-all',
+      className,
+    )}
+    {...props}
+  >
+    <div className="pt-0 pb-4">{children}</div>
+  </AccordionPrimitive.Content>
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

config/pinecone.ts

@@ -0,0 +1,13 @@
+/**
+ * Change the namespace to the namespace on Pinecone you'd like to store your embeddings.
+ */
+
+if (!process.env.PINECONE_INDEX_NAME) {
+  throw new Error('Missing Pinecone index name in .env file');
+}
+
+const PINECONE_INDEX_NAME = process.env.PINECONE_INDEX_NAME ?? '';
+
+const PINECONE_NAME_SPACE = 'chat-gpt-store'; //namespace is optional for your vectors
+
+export { PINECONE_INDEX_NAME, PINECONE_NAME_SPACE };

declarations/pdf-parse.d.ts

@@ -0,0 +1,5 @@
+declare module 'pdf-parse/lib/pdf-parse.js' {
+  import pdf from 'pdf-parse';
+
+  export default pdf;
+}

next.config.js

@@ -0,0 +1,11 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+  webpack(config) {
+    config.experiments = { ...config.experiments, topLevelAwait: true };
+    return config;
+  },
+};
+
+export default nextConfig;